HTML的相对定位和绝对定位
相对定位和绝对定位的概念，语法，以及固定定位和z-index的用法
相对定位：relative
作用：相对于自身原来的位置进行偏移，属性有：top，left，right，bottom
相对定位的主要用途是让其内部的绝对定位作为参照，也就是说使用绝对定位要和相对定位一起使用，举例：
在上图中我们同时提到了绝对定位，那么绝对定位的属性值为absolute
absolute的属性：left，right，top，bottom
使用绝对定位的元素要以一个已经定位的祖先元素为基准，绝对定位的元素从标准文档流中脱离，其后的元素就会占据其原来的位置。
值得注意的是，绝对定位总是和相对定位一起使用，且父元素为相对定位relative，子元素为绝对定位absolute；
扩展：
固定定位：fixed，使用fixed后，相对应的盒子不会随滚动条的滚动而滚动，且不占文档流。
堆叠层级：z-index，使用z-index必须使用position定位元素，当两个元素重叠时，值越大，会显示在浏览器上。
<style>
div{
width: 100px;
height: 100px;
background-color: cadetblue;
border: 1px solid pink;
}
#box1{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0px auto;
position:relative;
top: 50px;
}
#box2{
background-color: red;
position:relative;
left: 5px;
top: 120px;
z-index:3;
}
#box3{
background-color: green;
position:relative;
left: 25px;
top: 50px;
z-index:1;
}
#box4{
background-color: blue;
position:relative;
left: 50px;
top: -20px;
z-index:0 ;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">qwq</div>
<div id="box3">ewe</div>
<div id="box4">sws</div>
</div>
</body>
效果图：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)