定位(position):
使用 top、right、bottom 和 left 属性来调整元素的位置。
1、相对定位relative
relative 以自己为参照物
<style>
.div1{
width: 500px;
height: 500px;
background-color: aqua;
position: relative;
top: 70px;
left: 60px;
}
</style>
<body>
<div class="div1"></div>
</body>
2、绝对定位absolute
absolute
以最近的具有定位的祖先元素进行定位。如果没有符合条件的祖先元素,则相对于文档的初始包含块(页面窗口)进行定位。
一般为 子绝父相
z-index : 改变同级的上下叠放次序默认是0
<style>
.div1{
background-color: aquamarine;
width: 500px;
height: 500px;
position: relative;
}
.div2{
background-color: blue;
width: 200px;
height: 200px;
position: absolute;
}
.div3,.div4{
background-color: rgb(139, 251, 111);
width: 200px;
height: 100px;
position: absolute;
z-index: 5;
left: 150px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
3、固定定位relative
fixed
会以浏览器窗口进行定位,元素的位置在滚动时不会改变。
<style>
.div1{
height: 200px;
width: 100px;
background-color: aqua;
position: fixed;
right: 20px;
bottom: 200px;
}
.div2{
height: 5000px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
4、粘性定位sticky
sticky
css3新增属性
元素会像相对定位一样保持在其正常文档流中的位置,但当页面滚动到特定位置时,会变为固定定位。这意味着元素在滚动
时会“黏在”指定位置, 并在滚动到达某一阈值时固定在那个位置,直到滚动到达另一阈值。(支持不是很普遍)
<style>
.div1{
position: sticky;
top: 100px;
}
.div4{
height: 4000px;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
<div class="div4">444</div>
</body>