CSS定位属性

CSS定位属性

CSS有三种定位机制：普通流、浮动流和定位流，其中定位流为了实现一些层叠效果时需要的。定位属性position有5种，分别是：1.默认值：static 2.相对定位：relative 3.绝对定位：absolute 4.固定定位：fixed 5.黏性定位：sticky。

一、Position:Static
默认值，无定位效果，主要用于在取消元素之前的定位设置

二、相对定位：Position:relative
1.给元素加了相对定位以后，如果不给元素加定位偏移量的时候，不影响整体布局
2.相对定位不会使元素脱离正常文档流，空间会被保留
3.相对定位是相对于当前元素自身进行偏移的
4.相对定位需要给元素加top/bottom/right/left。
如：position:relative；top:100px;right:100px

三、绝对定位：Position:absolute
1.绝对定位会使元素脱离正常文档流
2.绝对定位是相对于有定位设置的祖先级元素进行偏移
3.默认情况下是相对于浏览器可视窗口显示
4.加了绝对定位的元素，使内联元素具备块元素特点，使块元素具备内联元素特点。
5.一般绝对定位是需要定义一个参照物，也就是包含块，如果祖先级元素定义成了包含块，那他就会相对于离他最近的祖先级元素进行绝对定位。一般推荐加Position:relative给祖先级元素定义成包含块。

.banner{background: url(…/img/banner.jpg) no-repeat;width:960px;height:330px;
position: relative;}

.banner ul{position:absolute;
bottom: 8px;right: 1px;}

四、固定定位：Position:fixed
1.固定定位使元素完全脱离文档流
2.加了固定定位的元素，使内联元素具备块元素特点，使块元素具备内联元素特点。
3.固定定位使相对于整个浏览器窗口进行偏移，不受滚动条和祖先级元素影响

4.一般用于页面中返回顶部的效果

.a9{position:fixed;right:0;top:50%;
margin-top:-56px;}

五、黏性定位：Position:sticky
黏性定位使用的最多就是制作吸顶效果，也就是当盒子在浏览器范围内的时候，水平方向的偏移效果跟relative是相同的，当滚动条滚动，盒子距离定位的间距符合top属性值的定义了，效果就跟fixed一样，从而实现吸顶效果。



.main{width: 1000px;height: 100px;
background: red;position: sticky;top:0}