CSS - position 属性

上一页
下一页

CSS 属性 `position` 用于控制网页中元素的位置。属性 top，bottom，right 和 left 用于控制元素在页面上的精确位置。它们指定元素与其边缘的偏移量。

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

可能的值

  • static − 元素根据页面的默认或正常流程定位。因此，如果设置 left/right/top/bottom/z-index，则这些属性对该元素无效。

  • relative − 元素的初始位置与 `static` 值一样，根据页面的正常流程。但是，现在 left/right/top/bottom/z-index 将起作用。位置属性会将元素从其初始位置向该方向移动。

  • absolute − 元素完全从文档流中移除。然后相对于其包含块定位，并使用侧边偏移属性放置其边缘。绝对定位的元素可能会与其他元素重叠，或者被其他元素重叠。

  • fixed − 元素的固定定位类似于绝对定位，不同之处在于固定元素的包含块始终是视口。元素完全从文档流中移除，并且相对于文档的任何部分都没有位置。

  • sticky − 元素粘附在其最近的具有“滚动机制”的已定位祖先元素的顶部。

应用于

所有元素。

语法

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

CSS position - static 值

使用 `position: 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 position - relative 值

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 值

具有 `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 值

要使元素即使在用户滚动时也保持在屏幕上的相同位置，可以将 `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: 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 - 在图片中定位文本

在下面的示例中，可以使用 `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 Position - 相关属性

以下是与 `position` 相关的 CSS 属性列表

属性 描述
bottom 与 `position` 属性一起使用，用于放置元素的底部边缘。
clip 设置元素的剪裁蒙版。
left 与 `position` 属性一起使用，用于放置元素的左边缘。
overflow 确定如何呈现溢出内容。
position 设置元素的定位模型。
right 与 `position` 属性一起使用，用于放置元素的右边缘。
top 设置元素的定位模型。
vertical-align 设置元素的垂直位置。
z-index 设置当前元素的渲染层。
打印页面
上一页
下一页
广告