CSS之定位布局(position，定位布局技巧)

当我们在进行页面布局时，经常需要对元素进行定位，这就需要用到CSS的position属性。position属性有以下值：

static （默认值）：元素没有定位，遵循普通文档流布局，left、top、right、bottom、z-index属性不起作用
relative：元素相对于自己原来存在的位置进行定位，left、top、right、bottom、z-index属性可用
absolute：根据最近的非static祖先元素进行定位，如果没有非static祖先元素则相对于body元素，在文档流中不占位置，left、top、right、bottom、z-index属性可用
fixed：根据浏览器窗口进行定位，不随页面滚动而滚动，left、top、right、bottom、z-index属性可用

下面我将通过两个示例来演示CSS的定位布局技巧。

示例一：fixed定位实现返回顶部功能

<body>
  <div id="wrapper">
    <p>此处省略若干内容</p>
    <a href="#" id="btn-top">返回顶部</a>
  </div>
</body>

#wrapper {
  position: relative;
  height: 2000px;
}

#btn-top {
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 100px;
  height: 50px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 50px;
}

上面的代码中，我们在页面底部添加了一个固定定位的“返回顶部”按钮。由于这个按钮是固定在页面底部的，所以当页面滚动时，这个按钮不会随着页面滚动而滚动。这是通过position: fixed属性实现的。

示例二：absolute定位实现垂直水平居中

<body>
  <div id="wrapper">
    <div class="box"></div>
  </div>
</body>

#wrapper {
  position: relative;
  height: 500px;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: blue;
}

上面的代码中，我们使用了absolute定位来实现了一个垂直水平居中的方块。由于position: absolute属性会使元素脱离文档流，所以我们必须在父级元素设置position: relative属性，来作为绝对定位的参考点。然后，我们设置box元素的top、left属性为50%，这时的位置是距离父元素左上角50%的位置。然后，我们使用transform: translate(-50%, -50%);把这个元素在水平方向上向左移动自身宽度的50%，在垂直方向上向上移动自身高度的50%，这时元素就可以完全居中了。

以上，就是我的CSS之定位布局（position，定位布局技巧）的完整攻略，希望能对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS之定位布局(position，定位布局技巧) - Python技术站

CSS之定位布局(position，定位布局技巧)

示例一：fixed定位实现返回顶部功能

示例二：absolute定位实现垂直水平居中

相关文章