Css 简明教程

CSS - Positioning

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

What is CSS Position?

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

与位置属性一起，其他属性（例如 top 、 bottom right 、 , and * left （用于控制页面上的确切位置。它们指定元素与其边缘之间的偏移量。本教程中将展示这些属性的示例。

Syntax

以下是 css 位置的可能值。

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

Static Positioned Element

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

Example

在本示例中，我们定义了两个静态定位 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>

Relative Positioned Elements

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

Example

在本示例中，我们定义了一个静态定位 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>

Absolutely Positioned Elements

具有 position: absolute 的元素会脱离文档流，并相对于其最近的定位祖先（如果有）进行定位。如果没有定位祖先，则元素相对于视区进行定位。

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

Example

此示例显示了绝对位置的使用。

<!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>

Position Fixed Element

在 CSS 中， position: fixed 属性用于使元素停留在屏幕上的同一位置，即使用户滚动页面。然后，可以使用 left、right、top 和 bottom 属性将元素放置在所需位置。

Example

在该示例中，可以看到在向下滚动时段落元素仍然位于原地。

<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>

Sticky Positioned Element

在 CSS 中， position: sticky 属性用于使任何元素停留在容器的顶部，即使用户滚动页面。然后，可以使用 left、right、top 和 bottom 属性将元素放置在所需位置。

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

Example

在该示例中，可以看见滚动时固定移动至顶部。

<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>

Positioning Text in an Image

在以下示例中，可以使用 position: absolute 属性将图像内的文字放置在不同的方向。这些文字元素分别放置在左上角、右上角、左下角和右下角。

Example

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

<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>