CSS属性之定位属性（图文详解）

CSS定位属性会对元素的显示位置进行控制，包括position、top/bottom和left/right等属性。本文将为大家详细介绍CSS定位属性，以及如何正确应用它们。

position属性

position属性用来指定元素在文档中的定位方式。常用的值有4种：

• static（默认）：元素在文档中遵循正常流程布局，不进行特殊定位。
• relative：相对于元素在正常布局中的相对位置进行定位。
• absolute：相对于最近的已定位父元素进行定位。
• fixed：相对于浏览器窗口进行定位。

下面是一个用relative进行定位的示例：

.relative-container {
  position: relative;
}

.relative-item {
  position: relative; /* 相对定位 */
  top: 20px; /* 上移20像素 */
  left: 50px; /* 左移50像素 */
}

<div class="relative-container">
  <div class="relative-item">我是相对定位的元素</div>
</div>

top/bottom和left/right属性

top/bottom和left/right属性用来指定元素在定位上下文中的精确位置。这两个属性只对position属性值为absolute、fixed或sticky的元素有效。

下面是一个用absolute和top/bottom/left/right进行定位的示例：

.absolute-container {
  position: relative;
  height: 200px; /* 为绝对定位的元素留出空间 */
}

.absolute-item {
  position: absolute;
  top: 50px; /* 距离父元素上边框50像素 */
  left: 30px; /* 距离父元素左边框30像素 */
  width: 100px;
  height: 100px;
  background-color: red;
}

<div class="absolute-container">
  <div class="absolute-item"></div>
</div>

上述代码将会在父元素的左上角距离顶部50像素，距离左侧30像素的位置添加一个宽高为100像素的红色方块。

除了top/bottom和left/right，还有一些其他的CSS定位属性，如z-index（设置元素的层次关系）、float（浮动元素）等。在使用CSS定位属性时，应该根据实际情况进行选择，避免滥用，以免影响网页的性能和可读性。