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 設定當前元素的渲染層。
列印頁面
上一頁
下一頁
廣告