css定位属性
position
- 取值：static，relative，absolute，fixed，sticky
- 默认值：static
- 继承性：无
static：对象遵循常规流。此时4个定位偏移属性不会被应用,同时设置z-index属性也是无效的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.child1{
width:200px;
height: 200px;
background-color: red;
position:absolute;
}
.child2{
width:40px;
height: 40px;
background-color: green;
z-index: 100; //div2并不会出现在div1的上面
}
.child3{
width:60px;
height: 1660px;
background-color: pink;
}
</style>
</head>
<body>
<div class="child1">1</div>
<div class="child2">2</div>
</body>
</html>
relative：对象遵循常规流。并且参照自身在常规流中的位置，通过top，right，bottom，left这4个定位偏移属性进行偏移，并且偏移后的位置不会影响常规流中的任何元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.item{
width:100px;
height:100px;
border:1px solid #ddd;
}
.item1{
background-color: red;
position:relative;
top:50px;
}
.item2{
background-color: green;
}
</style>
</head>
<body>
<div class="item item1">1</div>
<div class="item item2">2</div>
</body>
</html>
absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的非static定位的祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素。
注意：绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.parent{
position: relative;
width:550px;
height: 550px;
border: 1px solid #ddd;
}
.child1{
width:20px;
height: 20px;
background-color: red;
}
.child2{
width:40px;
height: 40px;
background-color: green;
position: absolute;
}
.child3{
width:60px;
height: 60px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
</div>
</body>
</html>
fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。
注意：
- 如果产生偏移，元素在常规流中原本占据的空间依然有效；(粉色区域并不会填补到原来绿色部分的区域)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin:0;
}
.child1{
width:20px;
height: 20px;
background-color: red;
}
.child2{
width:40px;
height: 40px;
background-color: green;
position: sticky;
top:130px;
}
.child3{
width:60px;
height: 1000px;
background-color: pink;
}
</style>
</head>
<body>
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
</body>
</html>
- 如果离它的祖先元素可以滚动，那么偏移位置以离它最近的可以滚动的祖先元素为参考；如果没有可以滚动的祖先元素，那么参考标准就是body元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin:0;
}
.parent{
margin:10px;
width:600px;
height: 600px;
border: 1px solid #ddd;
overflow:scroll; //注意区别加这句css与不加这句css时，绿色div的位置区别
}
.child1{
width:20px;
height: 20px;
background-color: red;
}
.child2{
width:40px;
height: 40px;
background-color: green;
position: sticky;
top:130px;
}
.child3{
width:60px;
height: 1000px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
</div>
</body>
</html>
- 偏移量设置的阈值必须小于元素本身距离参考元素的距离。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin:0;
}
.child1{
width:20px;
height: 20px;
background-color: red;
}
.child2{
width:40px;
height: 40px;
background-color: green;
position: sticky;
top:10px; //区别该css的值设置为10px和30px的差异
}
.child3{
width:60px;
height: 1000px;
background-color: pink;
}
</style>
</head>
<body>
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
</body>
</html>
本例中设置的阈值为10px时，小于元素本身（绿色div）距离参考元素（body）的20px，吸附的效果可以呈现，具体表现为：当页面不发生滚动时，元素自身本来的位置；当页面滚动时，且元素本身距离参考元素的距离大于设置的阈值时，元素随滚动条一起移动，而在元素本身距离参考元素的距离小于设置的阈值时，元素固定在屏幕上。