笙亿网络策划

CSS Positioning 怎么用？定位属性详解

约 14 分钟读完 33 阅
文章导读
上一个 测验 下一个 CSS 定位 可以帮助操控网页中任意元素的定位。在本教程中，我们将学习 position 属性及其相关值。
📋 目录
  1. A 目录
  2. B CSS Position 是什么？
  3. C 语法
  4. D Static 定位元素
  5. E 相对定位元素
  6. F 绝对定位元素
  7. G 固定定位元素
  8. H 粘性定位元素
  9. I 在图像中定位文本
  10. J CSS 定位相关属性
A A

CSS - 定位

上一个
测验
下一个

CSS 定位 可以帮助操控网页中任意元素的定位。在本教程中，我们将学习 position 属性及其相关值。

目录

  • CSS Position 是什么？
  • Static 定位元素
  • Relative 定位元素
  • Absolute 定位元素
  • Fixed 定位元素
  • Sticky 定位元素
  • 图片中的文本定位
  • 定位相关属性

 

CSS Position 是什么？

在 CSS 中，position 属性用于通过调整网页中元素的位置来创建浮动元素、浮动侧边栏以及其他交互功能。

除了 position 属性外，还可以使用其他属性如 top、bottom、right 和 left 来控制元素在页面上的精确位置。这些属性指定了元素与其边缘的偏移量。我们将在本教程中查看这些属性的示例。

语法

以下是 CSS position 的可能值。

position: static | relative | absolute | fixed | sticky;

Static 定位元素

当使用 position: static 属性时，元素将按照文档流的正常方式定位。left、right、top、bottom 和 z-index 属性不会影响该元素。这是 position 属性的默认值。

示例

在这个示例中，我们定义了两个 static 定位的 div 元素和一个 relative 定位的元素。请查看差异。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .container {
         padding: 20px;
         border: 1px solid #ccc;
      }
      .static-element {
         position: static;
         background-color: lightblue;
         padding: 10px;
         margin: 10px 0;
      }
      .non-static-element {
         position: relative; 
         top: 20px;
         background-color: lightgreen;
         padding: 10px;
      }
    </style>
</head>
<body>
    <div class="container">
      <div class="static-element">
         这是一个 static 元素（默认位置）。
      </div>
      <div class="non-static-element">
         这个元素不是 static，并且向下移动了 
         20px。
      </div>
      <div class="static-element">
         这是另一个 static 元素（默认 
         位置）。
      </div>
    </div>
</body>
</html>

相对定位元素

CSS position: relative 属性将元素相对于其在页面中的原始位置进行定位。你可以使用 left、right、top 和 bottom 属性来移动元素，但它仍然会在文档流中占用空间。

示例

在这个示例中，我们定义了一个 static 定位的 div 元素和一个 relative 定位的元素。请查看它们的区别。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      *{
         padding: 15px;
      }
      .container {
         border: 1px solid #ccc;
      }
      .static-element {
         position: static;
         background-color: lightblue;
      }
      .relative-element {
         position: relative;
         top: 20px;  
         left: 30px; 
         background-color: lightgreen;
      }
      .normal-flow {
         background-color: lightcoral;
         margin: 10px 0;
      }
   </style>
</head>

<body>
   <div class="container">
      <div class="static-element">
         This is a static element (default position).
      </div>
      <div class="relative-element">
         This element is relatively positioned 20px 
         down and 30px right.
      </div>
      <div class="normal-flow">
         This element is in the normal document 
         flow, after the relative element.
      </div>
   </div>
</body>
</html>

绝对定位元素

具有 position: absolute 的元素会从文档流中移除，并相对于其最近的 positioned 祖先元素（如果有的话）进行定位。如果没有 positioned 祖先元素，则相对于视口进行定位。

你可以使用 top、right、bottom 和 left 属性来指定元素相对于其包含块的位置。

示例

此示例展示了 position: absolute 的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      *{
         padding: 15px;
      }
      .container {
       /* 这使得 container 成为 positioned 祖先元素 */
         position: relative;
         width: 70%;
         height: 200px;
         border: 1px solid #ccc;
      }
      .static-element {
         position: static;
         background-color: lightblue;
         padding: 10px;
         margin: 10px 0;
      }
      .absolute-element {
         position: absolute;
      /* 距离最近的 positioned 祖先元素顶部 50px */
         top: 50px;
      /* 距离最近的 positioned 祖先元素左侧 30px */
         left: 30px; 
         background-color: lightgreen;
         padding: 10px;
      }
    </style>
</head>
<body>
    <div class="container">
      <div class="static-element">
         This is a static element (default position).
      </div>
      <div class="absolute-element">
         This element is absolutely positioned 30px 
         from top and 50px from left.
      </div>
    </div>
</body>
</html>

固定定位元素

在 CSS 中，position: fixed 属性用于使元素在用户滚动时保持在屏幕上的同一位置。然后，您可以使用 left、right、top 和 bottom 属性将元素定位到您想要的位置。

示例

在这个示例中，您可以看到段落元素在向下滚动时保持不动。

<html>
<head>
<style>
   div {
      width: 100%;
      height: 500px;
      background-color: lightgrey;
      overflow: auto;
      padding: 15px;
   }
   .fixed-position {
      position: fixed;
      top: 50%;
      left: 20%;
      padding: 5px;
      background-color: white;
   }
</style>
</head>
<body>
    <div>
      <p>You can Scroll down...</p>
      <p class="fixed-position">
          CSS Position Fixed
      </p>
      <p>
         White screen will remain at 50% 
         height from top 
      </p>
    </div>
</body>
</html>

粘性定位元素

在 CSS 中，position: sticky 属性用于使任何元素在用户滚动时保持在容器的顶部。然后，您可以使用 left、right、top 和 bottom 属性将元素定位到您想要的位置。

position: sticky 属性是 position: relative 和 position: fixed 属性的组合。

示例

在这个示例中，您可以看到滚动时，固定元素会移动到顶部。

<html>
<head>
<style>
   div {
      width: 100%;
      height: 500px;
      background-color: lightgrey;
      overflow: auto;
      padding: 15px;
   }
   .sticky-position {
      position: sticky;
      top: 50%;
      left: 20%;
      padding: 5px;
      background-color: white;
   }
</style>
</head>

<body>
      <div>
      <p>You can Scroll down...</p>
      <p class="sticky-position">
          CSS Position Fixed
      </p>
      <p>
         White screen will stick at top of 
         screen when you scroll down.
      </p>
      </div>
</body>
</html>

在图像中定位文本

在以下示例中，您可以使用 position: absolute 属性在图像内部的不同方向定位文本。文本元素被定位在左上、右上、左下和右下角。

示例

在以下示例中，我们在图像上定位了文本。

<html>
<head>
<style>
   .container {
      position: relative;
      border: 2px solid #ef2c2c;
   }
   .center {
      position: absolute;
      top: 45%;
      width: 100%;
      text-align: center;
   }
   .top-left {
      position: absolute;
      top: 12px;
      left: 30px;
   }
   .top-right {
      position: absolute;
      top: 12px;
      right: 30px;
   }
   .bottom-left {
      position: absolute;
      bottom: 12px;
      left: 30px;
   }
   .bottom-right {
      position: absolute;
      bottom: 12px;
      right: 30px;
   }
   img {
      width: 100%;
      opacity: 0.7;
   }
</style>
</head>
<body>
   <div class="container">
      <img src="/css/images/red-flower.jpg" 
            width="1000px" height="350px">

      <h3 class="center">
         Text at Center
      </h3>
      <h3 class="top-left">
         Text at Top Left
      </h3>
      <h3 class="top-right">
         Text at Top Right
      </h3>
      <h3 class="bottom-left">
         Text at Bottom Left</h3>
      <h3 class="bottom-right">
         Text at Bottom Right
      </h3>
   </div>
</body>
</html>

CSS 定位相关属性

以下是所有与 position 相关的 CSS 属性列表：

属性 描述 示例
bottom 与 position 属性一起使用，用于设置元素的底部边缘位置。
Try It
clip 为元素设置裁剪遮罩。
Try It
left 与 position 属性一起使用，用于设置元素的左侧边缘位置。
Try It
overflow 确定溢出内容如何渲染。
Try It
right 与 position 属性一起使用，用于设置元素的右侧边缘位置。
Try It
top 设置元素的定位模型。
Try It
vertical-align 设置元素的垂直定位。
Try It
z-index 设置当前元素的渲染层级。
Try It