position

Tue, 08 Oct 2024 00:00:00 +0800

CSS 中 position 属性用于指定元素的定位方法的类型（static、relative、absolute、fixed、sticky）。

静态定位 position: static

此属性未 HTML 元素默认定位，一个元素没有以任何特殊的方式定位，它总是按照页面的正常流程定位。

在此属性下，属性值 top、left、right、bottom 和 z-index 对HTML元素没有影响。

<div class="parent">
 <div class="child"></div>
</div>
<div class="sibling"></div>
<style type="text/css">
 .parent {
 width: 480px;
 height: 320px;
 background-color: #008800;
 }
 .child {
 width: 240px;
 height: 160px;
 background-color: #ff0000;
 }
 .sibling {
 width: 240px;
 height: 160px;
 background-color: #0000ff;
 }
</style>

效果如图：

为什么使用它呢？将元素设置为 position: static 的唯一原因是强制删除应用于无法控制的元素上的某些定位。

相对定位 position: relative

此属性相对于其正常位置的，在不改变布局的情况下根据元素的当前位置定位元素。

Position on Last Stand

position

静态定位 position: static

相对定位 position: relative