<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
静态定位static，是css默认的格式
通过position来设置元素的定位属性
-->
<!--
总结：
静态定位是默认的定位方式 position: static，是处于文档流中，受其他元素影响
相对定位 position: relative，是脱离文档流的，但原位置不被收回，被文档流中的其他元素影响
绝对定位 position: absolute，是脱离文档流的，原位置会被收回，这时会覆盖元素下面的元素
元素定位可以使用 left top right bottom 属性改变元素的位置
-->
<style type="text/css">
.one{
width: 200px;
height: 200px;
background-color: #ccc;
}
.two{
width: 200px;
height: 200px;
background-color: #cff;
}
.three{
width: 200px;
height: 200px;
background-color: navajowhite;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
固定定位 position: fixed；
以浏览器窗口为基准，设置left top right bottom
脱离文档流
-->
<style type="text/css">
/* body{
margin: 0;
border: 0;
} */
.one{
width: 200px;
height: 200px;
background-color: #ccc;
}
.two{
width: 200px;
height: 100px;
background-color: #cff;
position: fixed;
left: 50px
}
.three{
width: 200px;
height: 200px;
background-color: navajowhite;
}
</style>
</head>
<body>
<div class="two"></div>
<div class="one"></div>
<div class="three"></div>
<div class="one"></div>
<div class="three"></div>
<div class="one"></div>
<div class="three"></div>
<div class="one"></div>
<div class="three"></div>
<div class="one"></div>
<div class="three"></div>
<div class="one"></div>
<div class="three"></div>
<div class="one"></div>
<div class="three"></div>
<div class="one"></div>
<div class="three"></div>
</body>
</html>
![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
相对定位 relative，以自身为基准定位，不脱离文档流，
也就是说：相对定位元素仍然会被文档流中的其他元素所影响
设置坐标left top right bottom，不脱离文档流
根据坐标定位到新位置之后，并不回收原位置空间
-->
<style type="text/css">
.one{
width: 200px;
height: 200px;
background-color: #ccc;
}
.two{
width: 200px;
height: 200px;
background-color: #cff;
position: relative;
left: 50px
}
.three{
width: 200px;
height: 200px;
background-color: navajowhite;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
绝对定位 absolute：以父元素为基准，设置坐标，脱离文档流
特点：
1. 脱离文档流，也就是说：绝对元素将不再被文档流中的其他元素所影响
2. 根据坐标定位到新位置之后，原位置空间会被回收
3. 如果父元素也为relative或absolute定位，那么以父元素为基准。
4. 如果父元素不是relative定位，也不是absolute定位，那么一律以body为基准
-->
<style type="text/css">
.one {
width: 200px;
height: 200px;
background-color: #ccc;
}
.two {
width: 200px;
height: 200px;
background-color: #cff;
position: absolute;
left: 50px;
}
.three {
width: 200px;
height: 200px;
background-color: navajowhite;
}
.outer{
position: relative;
}
</style>
</head>
<body>
<!-- 以body为参照 -->
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<!-- 参照父元素，父元素被设置了相对定位，相当于父元素与子元素都脱离了文档流，处于同一个平面 -->
<div class="outer">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号