CSS定位(position):
/* 静态定位: 默认值。正常文档流,从上到下,从左到右 */
position:static;
/* 相对定位:相对于该元素的默认位置。
确定它的默认位置之后,通过left,top,right,bottom属性设置位置的偏移,偏移是相对于默认位置的。
但是它所占用的空间还保留在原位(默认位置),其他元素不会挤占它原本的空间 */
.box{
position:relative;
left:15px;
top:10px
}
/* 绝对定位:相对于父级盒子的定位。用于:弹出层、叠加、不规则位置、等布局。
会把元素移出正常的文档流,后边的元素会挤占他的空间,而它自己则会覆盖在挤占它元素的上方,
通过left,top,right,bottom属性设置位置的偏移,与relative相比,这个偏移是相对于父级盒子的*/
.box{
position:absolute;
left:15px;
top:10px
}
/* 固定定位:相对于浏览器窗口的定位。用于:固定浮窗、导航条、等布局。
与absolute定位类似,不同的是包含元素是当前浏览器窗口,
通过left,top,right,bottom属性设置位置的偏移之后,不论页面怎么滚动,都会固定在页面的同一个位置 */
.box{
position:fixed ;
left:15px;
top:10px
}
/* 说明:
absolute和fixed 这种脱离正常文档流的定位方式,会把它的宽高设置成内容的宽高,
通过left:0;right:0;让宽度占满包含容器。
通过top:0;bottom:0;让高度占满包含容器。
*/
/* css3属性:相当于relative和fixed的结合体。用于:侧边栏、底部内容、导航、等布局。
目标区域在屏幕中可见时,就像position:relative;距离浏览器一定位置。
页面滚动超出目标区域时,就像position:fixed;固定在这个位置。
可以让它距离浏览器窗口一定位置时,把他变成固定在这个位置,而其他情况下还在正常的文档流中,通过left,top,right,bottom属性设置距离浏览器多少像素时把它固定住 */
.box{
position:sticky;
top:10px
}
层叠顺序(z-index):
设置Z轴方向上的偏移(默认值是0,也可以设置成负数),
也就是浏览器到人眼的方向,数值越大,离人眼越近,所以数值大的覆盖在数值小的上面。
/* 除了static默认定位之外,其他定位,在设置了偏移之后很可能会覆盖在其他元素之上,
比如:有两个absolute定位在同一位置,后设置的absolute元素会覆盖在先定义的上面,
如果需要先定义的元素在上面,可以通过设置较大的偏移数值(z-index: 5;)来实现 */
/* 第一个absolute定位的元素*/
.box1{
position:absolute ;
left:15px;
}
/* 第二个absolute定位的元素*/
.box2{
position:absolute ;
left:15px;
z-index: 5;
}