position: ;定位
1.static 代表静态模式,常态模式
2.fixed 代表固定模式
特点:不随浏览器的滚动而滚动,释放掉自己原来的空间,参照物是整个浏览器
3.absolute 代表绝对模式
特点:随浏览器的滚动而滚动,释放掉自己原来的空间,参照物是整个浏览器
4.relative 代表相对位置
特点:随浏览器的滚动而滚动,保留自己原来的空间,参考物是自己之前的位置
5.结合模式:父级元素使用relative,子元素使用absolute
特点:子元素随浏览器的滚动而滚动,释放掉自己的空间,参考物是父级
6.与定位配套的方位属性left,right,top,bottom,但定位的取值必须是fixed,absolute,relative中的一项
7.与定位配套的层次属性z-index,调整,值越小越靠下,值越大,越靠上
.container{
width:600px;
height:1000px;
background:#81ecec;
position: relative;
/* 父级添加此标签 */
}
.top{
width:100px;
height:100px;
background:#482f82;
position: absolute;
/* 子元素,参照物是父级 */
top:200px;
left:100px;
}
.middle{
width:300px;
height:100px;
background:#9b185a;
position: absolute;
top:200px;
left:100px;
}
.bottom{
width:100px;
height:300px;
background:#a29bef;
position: absolute;
top:200px;
left:200px;
}
标签:滚动,top,100px,笔记,position,06,浏览器,CSS,absolute
From: https://blog.csdn.net/m0_74977981/article/details/141571787