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