CSS position属性

在本文中，我们将介绍CSS中的position属性，该属性用于控制元素的定位方式和位置。

阅读更多：CSS 教程

position的取值

position属性有四个取值：static、relative、absolute和fixed。

static

static是默认的定位方式，元素按照正常的文档流排列。

示例代码：

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

div {
  background-color: #eee;
  padding: 10px;
}
p {
  background-color: #fff;
  padding: 10px;
}

relative

relative表示相对定位，元素相对于它原本的位置进行定位，可以使用top、right、bottom、left属性调整位置。相对定位的元素不会影响其它元素的位置。

示例代码：

<div>
  <p>第一个段落</p>
  <p style="position:relative; top: 20px;">第二个段落</p>
</div>

absolute

absolute表示绝对定位，元素相对于最近的position取值不为static（包括relative）的祖先元素进行定位，如果没有该祖先元素，则相对于body元素进行定位。同样可以使用top、right、bottom、left属性调整位置。绝对定位的元素不会影响其它元素的位置。

示例代码：

<div style="position: relative;">
  <p>第一个段落</p>
  <p style="position:absolute; top: 20px; right: 10px;">第二个段落</p>
</div>

fixed

fixed表示固定定位，元素相对于视窗进行定位，可以使用top、right、bottom、left属性调整位置。固定定位的元素不会有滚动条，会一直停留在页面上。

示例代码：

<div>
  <p>第一个段落</p>
  <p style="position:fixed; bottom: 0; right: 0;">第二个段落</p>
</div>

z-index属性

当元素发生重叠时，z-index属性可以指定一个数值，表示元素的重叠顺序。数值越大，元素越在上层。

示例代码：

<div style="position: relative; z-index: 2;">
  <p>第一个段落</p>
</div>
<div style="position: absolute; left: 50px; top: 50px; background-color: #ccc; z-index: 1;">
  <p>第二个段落</p>
</div>

综合示例

以下是一个利用position属性实现悬浮提示框的完整示例代码：

<div style="position: relative;">
  <button onmouseover="document.getElementById('tip').style.display='block';" onmouseout="document.getElementById('tip').style.display='none';">悬浮显示提示框</button>
  <div id="tip" style="position: absolute; top: 30px; left: 50%; transform: translateX(-50%); display: none; background-color: #fff; border: 1px solid #999; padding: 10px;">
    这是一个提示框
  </div>
</div>

position属性通过控制元素的定位方式和位置，可以实现非常灵活的页面布局。合理使用z-index属性，可以解决元素之间的重叠问题。在实际开发中，需要根据具体情况选择合适的定位方式和位置，避免使用过多或不必要的定位，影响页面的性能和可维护性。