css定位属性
css的定位属性
定位在大部分情况下是层叠排列的布局方式。
语法：div{position:static/relative/absolute/fixed/sticky;
left:;
right:;
top:;
bottom:;}
left、top、bottom、right配合定位属性使用，分别相对于参照物向左、上、下、右发生偏移，单位为像素（px）
定位的属性值
1.static:默认值，没有定位。
2.relative:相对定位。
相对定位的参照物：自己的位置。
在未设置相对定位前，下面图片的三个块状元素是由上至下的排列方式显示的。
设置相对定位之后，蓝色色块会相对与自身的位置发生偏移。并且蓝色块不会脱离文档流，会保留偏移前的空间。不会影响其他元素的位置布局。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 200px;
height: 200px;}
.top{background: red;}
.middle{background: blue;
position: relative;
top: 50px;
left: 50px;}
.bottom{background: black;}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</body>
</html>
3.absolute：绝对定位
在未设置绝对定位前，下面图片的三个块状元素红色块包含了蓝色块和黑色块，蓝色块和黑色块是由上至下的排列方式显示的，并且红色块是蓝色块和黑色块的父元素。
给蓝色块设置绝对定位后，蓝色块的位置发生偏移，并且黑色块的位置也发生了改变，说明绝对定位会使元素脱离文档流。
绝对定位的参照物是设置了相对定位的祖先级元素，如果祖先级元素中有多个设置了相位定位属性，则定位元素以离自己最近的祖先级元素为参照物。
注：一般绝对定位会配合相对定位来使用。父元素设置相对定位，子元素设置绝对定位，子元素设置偏移方向和偏移量。（父相子绝）
绝对定位会使块状元素具备内联元素的特性，也会使内联元素具备块状元素的特性。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 200px;
height: 200px;}
.top{background: red;
width: 500px;
height: 500px;
position: relative;}
.middle{background: blue;
position: absolute;
top: 50px;
left: 50px;}
.bottom{background: black;}
</style>
</head>
<body>
<div class="top">
<div class="middle"></div>
<div class="bottom"></div>
</div>
</body>
</html>
3.fixed：固定定位。
固定定位的参照物是浏览器的窗口。
我们沿用绝对定位的色块位置说明。
设置固定定位后，黑色块依然改变了位置，说明固定定位也可以使元素脱离文档流。
固定定位会固定在浏览器窗口的设定位置，不受父元素的束缚，不受浏览器窗口滚动条的影响
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 200px;
height: 200px;}
.top{background: red;
width: 500px;
height: 500px;}
.middle{background: blue;
position: fixed;
bottom:0px;
left: 0px;}
.bottom{background: black;}
</style>
</head>
<body>
<div class="top">
<div class="middle"></div>
<div class="bottom"></div>
</div>
</body>
</html>
逆战班献上