CSS 資料型別 - <position>

CSS 資料型別<position>表示HTML元素在其容器元素內的定位行為。它用於設定相對於元素框或其他元素的位置。

<position>與背景圖片的background-position、object-position、mask-position、offset-position、offset-anchor和transform-origin一起使用。

下圖描述了元素的所有位置

一個或兩個關鍵字和可選的偏移量用於在CSS中指定<position>資料型別。
可以使用center、top、right、bottom和left這些術語。這些關鍵字與元素框的中心線或外邊界相匹配。
middle 術語可以表示頂部和底部邊緣之間的中點，也可以表示左側和右側之間的中點，具體取決於上下文。
<position>資料型別允許將偏移量表示為絕對<length>值或相對<percentage>值。
負值導致元素向與正值相反的方向移動，這會導致它向右或底部移動。如果只給出一個偏移量，則確定x座標；另一個軸的值預設為中心。

語法

<position> = [ left | center | right | top | bottom | <length-percentage> ]  |
[ left | center | right ] && [ top | center | bottom ]  |
[ left | center | right | >length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

CSS <position> - 有效位置

center
left
center top
right 5.5%
bottom 15vmin right -3px
15% 25%
4rem 22px

CSS <position> - 無效位置

left right
bottom top
10px 15px 20px 15px

CSS <position> - 相對定位

下面的例子演示了在CSS屬性background-position中使用<position>資料型別，其中傳遞的值是相對的，即center和left。線性漸變放置在頁面的左中心。

<html>
<head>
<style>
   body {
      height: 200px;
      background-color: #222;
      background-image: radial-gradient(circle at center, red, green 3em);
      background-size: 15em 10em, 30% 70%, 100px 70px;
      background-position: center left;
      background-repeat: no-repeat no-repeat;
   }
</style>
</head>
<body>  
</body>
</html>

CSS <position> - 絕對定位

下面的例子演示了在CSS屬性position中使用<position>資料型別，以及其他屬性，如top、left、right和bottom，其中傳遞的值是相對的和絕對的。

<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> - 固定定位

下面的例子演示了在CSS屬性position中使用<position>資料型別，其中傳遞的值是fixed。

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

列印頁面