CSS-位置

CSS 位置属性

CSS 属性位置有助于操纵网页中元素的位置。属性top、Bottom、right和left用于控制其在页面上的确切位置。它们指定元素与其边缘的偏移量

属性position可用于创建浮动元素、浮动侧边栏和其他交互功能。

以下是可能的值：

  • static -元素根据页面的默认或正常流程定位。因此，如果我们设置 left/right/top/bottom/z-index，那么对该元素不会有任何影响。

  • 相对 -元素的原始位置根据页面的正常流程，就像静态值一样。但现在左/右/上/下/z-index 可以工作了。位置属性将元素从原始位置推向该方向。

  • Absolute -该元素已从文档流中完全删除。然后，它相对于其包含块进行定位，并使用侧向偏移属性放置其边缘。绝对定位的元素可以与其他元素重叠，或者被它们重叠。

  • 固定 -元素的固定定位就像绝对定位一样，除了固定元素的包含块始终是视口。这里的元素完全从文档流中删除，并且没有相对于文档任何部分的位置。

  • Sticky -该元素粘在其最近定位的具有“滚动机制”的祖先的顶部。

CSS 位置 - 演示

尝试为 CSS位置属性选择不同的值，然后查看效果。

CSS 位置 - 静态

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

例子

这是一个例子 -

<html>
<head>
<style>
   .normal-box {
      display: inline-block;
      background-color: #f2c3ee;
      border: 1px solid #000000;
      padding: 10px;
      margin-bottom: 20px;
      width: 300px;
      height: 100px;
   }
   .static-box {
      display: inline-block;
      position: static;
      background-color: #bbedbb;
      border: 1px solid #000000;
      padding: 10px;
      width: 300px;
      height: 100px;
   }
</style>
</head>
<body>
   <div class="normal-box">
      <h2>Normal Box</h2>
      <p>This is a normal box.</p>
   </div>

   <div class="static-box">
      <h2>Position: static</h2>
      <p>This is a box with static position.</p>
   </div>
</body>
</html>

CSS 位置 - 相对

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

例子

这是一个例子 -

<html>
<head>
<style>
   .normal-box {
      display: inline-block;
      background-color: #f2c3ee;
      border: 1px solid #000000;
      padding: 10px;
      margin-bottom: 20px;
      width: 300px;
      height: 100px;
   }
   .relative-box {
      display: inline-block;
      position: relative;
      left: 30px;
      background-color: #bbedbb;
      border: 1px solid #000000;
      padding: 10px;
      width: 300px;
      height: 100px;
   }
</style>
</head>
<body>
   <div class="normal-box">
      <h2>Normal Box</h2>
      <p>This is a normal box.</p>
   </div>
   <div class="relative-box">
      <h2>Position: relative</h2>
      <p>This is a box with relative position.</p>
   </div>
</body>
</html>

CSS 位置 - 绝对

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

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

例子

这是一个例子 -

<html >
<head>
<style>
   .normal-box {
      background-color: #f2c3ee;
      border: 1px solid #333;
      padding: 10px;
      margin-bottom: 20px;
      width: 350px;
      height: 100px;
   }
   .absolute-box {
      background-color: #bbedbb;
      border: 1px solid #333;
      padding: 10px;
      position: relative;
      width: 300px;
      height: 100px;
      left: 20px;
      bottom: 20px;
   }
</style>
</head>
<body>
   <div class="normal-box">
      <h2>Normal Box</h2>
      <p>This is a Noraml box.</p>
      <div class="absolute-box">
         <h2>Position: Absolute</h2>
         <p>This is a box with absolute position.</p>
      </div>
   </div>
</body>
</html>

CSS 位置 - 固定

要使元素即使在用户滚动时也保持在屏幕上的同一位置，可以将position属性设置为fixed。然后，您可以使用 left、right、top 和 Bottom 属性将元素放置在您想要的位置。

例子

这是一个例子 -

<html>
<head>
<style>
   .position_container {
      width: 400px;
      height: 200px;
      background-color: #f2c3ee;
      overflow: auto;
      padding: 5px;
   }
   .fixed-position {
      position: fixed;
      top: 15px;
      left: 60px;
      padding: 5px;
      background-color: #bbedbb;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="position_container">
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p class="fixed-position">Tutorialspoint CSS Position Fixed</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
</body>
</html>

CSS 位置 - 粘性

您可以将position属性设置为sticky，以创建一个当用户滚动页面时粘在视口顶部的元素。

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

例子

这是一个例子 -

<html>
<head>
<style>
   .position_container {
      width: 400px;
      height: 200px;
      background-color: #f2c3ee;
      overflow: auto;
      padding: 5px;
   }
   .sticky-position {
      position: sticky;
      top: 15px;
      padding: 5px;
      background-color: #bbedbb;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="position_container">
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p class="sticky-position">Tutorialspoint CSS Position Sticky</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
</body>
</html>

CSS 在图像中定位文本

在下面的示例中，您可以使用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.3;
   }
</style>
</head>
<body>
   <div class="container">
      <img src="images/red-flower.jpg" alt="abc" width="1000px" height="350px">
      <h3 class="center">Text at Centered</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 位置 - 相关属性

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

财产 描述
底部

与position属性一起使用来放置元素的底部边缘。
夹子

设置元素的剪切蒙版。
左边

与position属性一起使用来放置元素的左边缘。
溢出

确定如何呈现溢出内容。
位置

设置元素的定位模型。
正确的

与position属性一起使用来放置元素的右边缘。
顶部

与position属性一起使用来放置元素的上边缘。
垂直对齐

设置元素的垂直位置。
z 索引

设置当前元素的渲染层。