本文深入探讨了CSS定位中的relative、absolute和fixed三种方式，详细解释了它们的工作原理和区别。relative定位不会脱离文档流，偏移以自身为参考；absolute则相对于最近已定位祖先元素定位，可造成脱标；fixed定位则固定于浏览器窗口，随滚动条移动。同时，文章通过示例和总结强调了z-index在定位层叠中的作用，以及如何利用定位技术实现特定的样式效果。
1.定位
position：relative（相对）、absolute（绝对）、static（无定位）、fixed（固定）
2.position：relative 相对定位
相对定位的偏移参考元素时元素本身，不会使元素脱离文档流，元素的初始位置占据的空间会被保留。
示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="main">
<div class="div1"></div>
相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br>
绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
</div>
</body>
</html>
.main{
width: 600px;
height: 300px;
background-color: yellow;
}
.div1{
width: 100px;
height: 100px;
background-color: red;
/* position: relative;
top:20px;
left: 30px; */
}
将注释去掉后
相对于以前位置的偏移，并且红色区域以前位置没有被填充。
3.绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么他的位置就相对与最初的包含块（如body）
position: absolution
相对于以前位置的偏移，并且红色区域以前位置被填充。（脱标流）
4.相对定位和绝对定位的区别：
①参照物不同，相对定位的参照物是它本身。绝对定位的参照物是已定位的最先的祖先元素。
②是否破坏文档流，相对定位不会，绝对定位会。
5.绝对定位和float都可破坏文档流，即脱标流。那么它们的区别是什么，实现浮动应该选择float还是绝对定位？
float(不会产生重叠）
而position：absolute会重叠。
6.固定定位：相对于浏览器窗口进行定位。（随滚动条滚动）
pisition:fixed 演示div相对浏览器位置不改变的效果。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div 
最低0.47元/天 解锁文章
1915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
