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>

打印页面