前端必知必会-CSS 布局position属性

---

CSS 布局 - position 属性

position 属性指定元素使用的定位方法类型（静态、相对、固定、绝对或粘性）。
position 属性指定元素使用的定位方法类型。

有五种不同的 position 值：

• static
• relative
• fixed
• absolute
• sticky

然后使用 top、bottom、left 和 right 属性定位元素。但是，除非先设置 position 属性，否则这些属性将不起作用。它们的工作方式也因 position 值而异。

position: static;

HTML 元素默认为静态定位。

静态定位元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不以任何特殊方式定位；它始终根据页面的正常流程进行定位：

示例

div.static {
position: static;
border: 3px solid #73AD21;
}

position:relative;

具有 position:relative; 的元素相对于其正常位置进行定位。

设置相对定位元素的 top、right、bottom 和 left 属性将导致其调整远离其正常位置。其他内容将不会调整以适应元素留下的任何间隙。

示例

div.relative {
position:relative;
left:30px;
border:3px solid #73AD21;
}

position:fixed;

具有 position:fixed; 的元素相对于视口进行定位，这意味着即使页面滚动，它也始终保持在同一位置。top、right、bottom 和 left 属性用于定位元素。

固定元素不会在页面中留下它通常所在的间隙。

示例

div.fixed {
position:fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

position: absolute;

具有 position: absolute; 的元素相对于最近的定位祖先进行定位（而不是像 fixed 那样相对于视口进行定位）。

但是；如果绝对定位元素没有定位祖先，它将使用文档主体，并随页面滚动而移动。

注意：绝对定位元素从正常流中移除，并且可以重叠元素。

示例

div.relative {
position:relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position:absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

position: sticky;

带有 position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对和固定之间切换。它处于相对位置，直到在视口中达到给定的偏移位置 - 然后它“粘住”在原位（如 position:fixed）。

注意：Internet Explorer 不支持粘性定位。Safari 需要 -webkit- 前缀（见下面的示例）。您还必须至少指定 top、right、bottom 或 left 中的一个才能使粘性定位起作用。

示例

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

---

总结

本文介绍了的CSS 布局position属性使用，如有问题欢迎私信和评论