CSS定位方式

CSS定位方式

一、定位属性

参数	说明
position	定义位置
left	指定元素横向距左部距离
right	指定元素横向距右部距离
top	指定元素纵向距顶部距离
bottom	指定元素纵向距底部距离
z-index	设置元素的层叠顺序
width	设置元素框宽度
height	设置元素框高度
overflow	内容溢出控制
clip	剪切

元素框是指包含每个元素的矩形框。 元素内容与元素框共同形成了元素块。 

定位是指设定元素块位置和大小。 

上表中前6个属性是实际的定位属性，后面的4个有关属性用来设置元素框，或对元素框中的内容进行控制的属性。其中，position属性是最主要的定位属性。

2.position定位 

语法格式： 

Position: static | absolute | fixed | relative

属性值	说明
static	元素定位的默认值，无特殊定位，对象遵循HTML定位规则，不能通过z-index进行层次分级
relative	相对定位，对象不可重叠，可以通过left,right,bottom和top等属性在正常文档中偏移位置，可以通过z-index进行层次分级
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,right,bottom和top属性进行规定
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left,right,bottom和top属性进行规定

3.Absolute：参照浏览器的左上角，配合left、right、bottom和top进行定位。如果没有设置这四个值，则默认依据父级的坐标原点为原始点。 

Position:absolute

4.Relative：相对于某个元素的原始起点进行移动。

与绝对定位的区别：绝对定位的坐标原点为上级元素的原点，与上级元素有关；相对定位的坐标原点为本身偏移前的原点，与上级元素无关。 

5.Fixed：固定定位。是绝对定位的特殊形式，固定定位的容器不会随着滚动条的拖动而变化位置。在视线中，固定定位的容器位置不会改变。 

固定定位的参照位置不是上级元素块而是浏览器窗口。

使用固定定位的元素可以脱离页面，无论页面如何滚动，始终处在页面的同一位置上。

6.Z-index：层叠顺序。从深度上设定元素层叠的次序，其方法是每个元素指定一个数字，数字较大的元素将叠加在数字较小的元素之上。 

z-index: auto | number

●Auto表示遵循父对象的定位

●Number是一个无单位的整数值，可以为负值。

该属性只作用在position的属性值为relative或absolute的对象，不能作用在窗口组件上。

7.边偏移属性：用来描述元素块与包含元素块最近的边线之间的偏移量的属性。 

left,right,top,bottom

left: auto | length

●auto表示系统自动取值

●Length表示由浮点数字和单位标识符组成的长度值或百分数

■数值设置元素的绝对位置

■百分数设置相对于其上级元素的位置

二、Float定位

1.float定位只能在水平方向上定位。 

语法格式：

   float: none | left | right

none：不浮动

left：浮动在左边

right：浮动在右边

使用float可以实现两列布局，即让一个元素在左浮动，另一个元素在右浮动，并控制好这两个元素的宽度

2.使用float属性不但改变元素的显示位置，同时会对相邻内容造成影响。定义了float属性的元素会覆盖在其他元素上，被覆盖的区域将处于不可见状态。

如果不想让float下面的其他元素浮动环绕在该元素周围，可以使用clear属性清除。

  clear: none | left | right | both

●none:允许两边都有浮动对象

●left:不允许左边有浮动对象

●right:不允许右边有浮动对象

●both:不允许有浮动对象

三、Overflow溢出定位

如果元素框被指定了大小，而元素的内容不适合该大小，可以使用溢出属性来控制。

语法格式：

   overflow:visible | auto | hidden | scroll

属性值	说明
visible	若内容溢出，则溢出内容可见
hidden	若内容溢出，则溢出内容隐藏
scroll	保持元素框大小，在框内应用滚动条显示内容
auto	等同于scroll，它表示在需要时应用滚动条

Overflow适用于以下情况：

当元素有负边界时

元素框宽于上级元素内容区，不允许换行

元素框宽于上级元素区域宽度

元素框高于上级元素区域高度

元素定义了绝对定位