CSS position
CSS position属性用于
设置元素的位置。它还可用于将元素放置在另一个元素之后，在JavaScript中应用很多。
可以使用top，bottom，left和right属性定位元素。只有先设置位置属性后，才能使用这些属性。position元素的计算位置属性包括：relative, absolute, fixed和sticky。
让我们看看以下CSS position：
CSS静态定位
CSS固定位置
CSS相对定位
CSS绝对定位
1）CSS静态定位
这是HTML元素的默认位置。它始终根据页面的正常流程定位元素。不受top，bottom，left和right属性的影响。
2）CSS固定位置
固定位置属性有助于将文本固定在浏览器上。此固定测试相对于浏览器窗口定位，即使滚动窗口也不会移动。
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
position: fixed;
top: 50px;
right: 5px;
color: blue;
}
</style>
</head>
<body>
<p>一段文字...</p><p>一段文字...</p><p>一段文字...</p><p>........</p><p>.... ...</p
><p>........</p><p>........</p><p>........</p><p>........</p>
<p>........ </p><p>........</p><p>........</p><p>........</p><p>........</p>
<p>........</p><p>........</p><p>一段文字...</p><p>一段文字...</p><p>一段文字...</p>
<p class="pos_fixed">这是固定位置的文本。</p>
</body>
</html>
3）CSS相对定位
相对定位属性用于设置元素相对于其正常位置的位置。
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
position: relative;
left: -30px;
}
h2.pos_right {
position: relative;
left: 30px;
}
</style>
</head>
<body>
<h2>这是一个没有位置的标题</h2>
<h2 class="pos_left">此标题根据其正常位置位于左侧</h2>
<h2 class="pos_right">此标题根据其正常位置正确定位</h2>
<p>样式“ left：-30px”从元素的原始左侧位置减去30个像素。</p>
<p>样式“ left：30px”将30像素添加到元素的原始左侧位置。</p>
</body>
</html>
4）CSS绝对定位
绝对定位用于相对于具有非静态位置的第一个父元素定位元素。如果找不到此类元素，则包含的块为HTML。
通过绝对定位，您可以将元素放置在页面上的任何位置。
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
position: absolute;
left: 150px;
top: 250px;
}
</style>
</head>
<body>
<h2>此标题具有绝对位置</h2>
<p> 下方标题位于页面左侧150px和顶部250px。</p>
</body>
</html>
所有CSS位置属性
| 属性 |
说明 |
值 |
| bottom |
底部边缘距离 |
auto, length, %, inherit |
| clip |
剪裁绝对定位元素。 |
shape, auto, inherit |
| cursor |
光标的类型。 |
url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help |
| left |
左边缘距离 |
auto, length, %, inherit |
| overflow |
内容溢出边框处理 |
auto, hidden, scroll, visible, inherit |
| position |
定位类型。 |
absolute, fixed, relative, static, inherit |
| right |
右边缘距离 |
auto, length, %, inherit |
| top |
上边缘距离 |
auto, length, %, inherit |
| z-index |
它用于设置元素的堆叠顺序。 |
number, auto, inherit |
