css定位

浮动和定位

1.浮动

1.1什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父级指定的位置

1.2浮动的特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

1.3清除浮动的方法

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden/auto/scroll;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

2.列表的属性

2.1 list-style-type

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块

2.2 list-style-position

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

2.3 list-style-image

值	描述
URL	图像的路径。
none	默认。无图形被显示。

3.定位

3.1 relative：相对定位

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

3.2absolute:绝对定位

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

绝对定位最重要的一点是以元素最近的已经定位（绝对、固定或相对定位）的**父元素（祖先）**进行定位。

3.3sticky:粘性定位

• 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

• 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 **position:fixed;**它会固定在目标位置。

注意:

边偏移:一定要指定 top, right, bottom 或 left 四个值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。

3.4fixed:固定定位

固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

3.5z-index:叠放次序

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。此时就可以使用这个值来显示优先级的大小

CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）