CSS - 定位

CSS **定位**有助于操作网页中任何元素的位置。在本教程中，我们将学习 position 属性及其关联的值。

什么是 CSS 位置？

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

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

语法

以下是 css position 的可能值。

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

静态定位元素

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

示例

在此示例中，我们定义了两个静态定位的 div 元素和一个相对定位的元素。查看区别。

<!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">
         This is a static element (default position).
      </div>
      <div class="non-static-element">
         This element is not static and is moved 
         20px down.
      </div>
      <div class="static-element">
         This is another static element (default 
         position).
      </div>
    </div>
</body>
</html>

相对定位元素

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

示例

在此示例中，我们定义了一个静态定位的 div 元素和一个相对定位的元素。查看区别。

<!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** 的元素将从文档流中移除，并相对于其最近的已定位祖先（如果有）进行定位。如果没有已定位的祖先，则元素相对于视口进行定位。

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

示例

此示例显示了 position absolute 的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      *{
         padding: 15px;
      }
      .container {
       /* This makes container positioned ancestor */
         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;
      /* 50px from top of nearest positioned ancestor */
         top: 50px;
      /* 30px from left of nearest positioned ancestor */
         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">
         Tutorialspoint 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** 属性的组合。

示例

在此示例中，您可以看到当您滚动时，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">
         TutorialsPoint 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 属性一起使用以放置元素的底部边缘。	尝试一下
clip	设置元素的剪切蒙版。	尝试一下
left	与 position 属性一起使用以放置元素的左边缘。	尝试一下
overflow	确定如何呈现溢出内容。	尝试一下
right	与 position 属性一起使用以放置元素的右边缘。	尝试一下
top	设置元素的定位模型。	尝试一下
vertical-align	设置元素的垂直位置。	尝试一下
z-index	设置当前元素的渲染层。	尝试一下

打印页面