html中position定位有：
- static (默认的定位方式，文档流）
- relative (相对定位）
- absolute (绝对定位）
- fixed (固定定位）
这几种方式，下面分别看下
relative 相对定位
PS： 默认的定位方式就不做介绍了
相对定位指：
1 . 相对于文档流原本位置的偏移
2 . 偏移后仍占据文档流（也就位置仍然会占有）
<style>
#relative {
position: relative;
padding: 10px;
top: 20px;
left: 50px;
border: 5px solid green;
}
</style>
<div>
<p>相对定位的前一个内容</p>
<span id="relative">我是相对定位, 本来 span 标签属于内联标签，默认应该和p标签同一行的</span>
</div>
image.png
absolute 绝对定位
绝对定位：
1 .参照物是它的父元素中定了位的元素（position 等于 relative/absolute/fixed)
2 . 绝对定位不占据文档空间（后来者会当它不存在）
3 .在定了位的父元素容器中，它的默认位置仍是按文档流来的。
父元素定位 VS 没定位区别
#absolute {
position: absolute; // 绝对定位
padding: 10px;
top: 30px;
left: 50px;
border: 5px solid red;
}
<body>
<div>
<p>相对定位的前一个内容</p>
<p id="relative">我是相对定位, 本来默认应该紧紧挨在p下的</p>
</div>
<div>
<p>绝对定位的前一个内容</p>
<div id="absolute">
绝对定位元素
</div>
</div>
</body>
image.png
父元素定位-绝对定位不偏移（按文档流）
#absolute-parent {
position: relative; // 父元素定位
top: 10px;
border: 5px solid;
width: 300px;
height: 300px;
}
#absolute {
position: absolute; // 绝对定位
padding: 10px;
border: 5px solid red;
}
<body>
<div>
<p>相对定位的前一个内容</p>
<p id="relative">我是相对定位, 本来默认应该紧紧挨在p下的</p>
</div>
<div id="absolute-parent">
<p>绝对定位的前一个内容</p>
<div id="absolute">
绝对定位元素
</div>
</div>
</body>
image.png
父元素定位-偏移
#absolute-parent {
position: relative; // 父元素定位
top: 10px;
border: 5px solid;
width: 300px;
height: 300px;
}
#absolute {
position: absolute; // 绝对定位
padding: 10px;
top: 30px;
left: 50px;
border: 5px solid red;
}
<body>
<div>
<p>相对定位的前一个内容</p>
<p id="relative">我是相对定位, 本来默认应该紧紧挨在p下的</p>
</div>
<div id="absolute-parent">
<p>绝对定位的前一个内容</p>
<div id="absolute">
绝对定位元素
</div>
</div>
</body>
image.png
父元素定位-不占文档流
<body>
<div>
<p>相对定位的前一个内容</p>
<p id="relative">我是相对定位, 本来默认应该紧紧挨在p下的</p>
</div>
<div id="absolute-parent">
<p>绝对定位的前一个内容</p>
<div id="absolute">
绝对定位元素
</div>
<p>我是绝对定位后的元素，我会与绝对定位内容重复，应为它不占文档流</p>
</div>
<div id="fixed">
固定定位
</div>
</body>
image.png
fixed 固定定位
固定定位
1 .它的定位参照物是相对于视口（我们的设备、浏览器等）
2 .缩放窗口过程中，始终保持定位
#fixed {
position: fixed;
bottom: 0;
left: 0;
border: 5px solid red;
}
<div id="fixed">
固定定位
</div>
image.png
网友评论