CSS – 将元素以其自身宽度的百分比定位

在本文中，我们将介绍如何使用CSS将元素以其自身宽度的百分比进行定位。CSS的position属性可以帮助我们实现这一目标。通过设置position属性的值为”relative”，我们可以使用百分比来定位元素。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是CSS的position属性？

CSS的position属性用于确定元素在文档中的定位方式。它有四个可能的值：static、relative、fixed和absolute。在本文中，我们将使用position属性的值为”relative”来定位元素。

position: relative;

如何以百分比定位元素？

要以百分比定位元素，我们需要在CSS样式中使用left或right属性，并将其值设置为相对于元素自身宽度的百分比。

例如，假设我们有一个div元素，宽度为300像素。我们想要将它相对于其自身宽度的50%左移。我们可以这样做：

div {
  position: relative;
  left: -50%;
}

在上面的代码中，通过将left属性设置为-50%，我们实际上将div元素向左移动了相对于自身宽度的50%。

同样，如果我们想将元素右移相对于自身宽度的25%，我们可以这样写：

div {
  position: relative;
  left: 25%;
}

通过将left属性设置为25%，我们将div元素向右移动了相对于自身宽度的25%。

百分比定位示例说明

让我们使用一个具体的示例来说明如何使用CSS将元素以其自身宽度的百分比进行定位。

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
  <style>
    .container {
      width: 400px;
      height: 200px;
      background-color: lightgray;
      position: relative;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: orange;
      position: relative;
      left: 25%;
      top: 50%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

在上述示例中，我们创建了一个容器div，宽度为400像素，高度为200像素，背景颜色为浅灰色。内部有一个box div，宽度和高度均为100像素，背景颜色为橙色。我们使用position: relative将这两个div元素都相对于自身进行定位。box div的left属性设置为25%，top属性设置为50%，使其向右移动相对于自身宽度的25%，向下移动相对于自身高度的50%。

运行上述代码，我们可以看到box div被定位在了容器div的右上角位置。