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,吸附的效果可以呈现,具体表现为:当页面不发生滚动时,元素自身本来的位置;当页面滚动时,且元素本身距离参考元素的距离大于设置的阈值时,元素随滚动条一起移动,而在元素本身距离参考元素的距离小于设置的阈值时,元素固定在屏幕上。