CSS 屬性 – Position

一、什麼是Position？

Position是CSS中最基礎的布局屬性之一，它用於控制元素在頁面中的定位方式，並且可以與CSS的其他布局屬性配合使用，實現更加靈活的頁面布局。

Position屬性有以下4種取值：

static：默認值，元素在頁面中按照正常文檔流進行布局；
relative：元素在頁面中按照正常文檔流進行布局，但是可以通過設置top、right、bottom、left屬性，調整元素相對於其正常文檔流位置的偏移量；
absolute：元素脫離正常文檔流，相對於最近的非static定位的祖先元素進行絕對定位；
fixed：元素脫離正常文檔流，相對於瀏覽器窗口進行固定定位。

.example {
    position: relative;
    top: 50px;
    left: 20px;
}

二、Position與布局

Position屬性可以配合其他CSS布局屬性實現多種複雜布局效果。

1. Sticky Footer

Sticky Footer是一種常用的頁面布局方式，它可以實現在內容較少時，將頁面內容自動向下推至底部；而在內容較多時，將頁腳固定在頁面底部。這種布局方式可以通過使用Position和Flexbox屬性來實現。

/* html部分 */
<body>
    <div class="wrapper">
        <div class="content">
            <p>這裡是頁面內容</p>
        </div>
    </div>
    <div class="footer">這裡是頁腳</div>
</body>

/* css部分 */
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  /* flex屬性用於實現子元素在容器內的分佈 */
  display: flex;
  flex-direction: column;
}
.content {
  /* 容器中內容的可擴展性 */
  flex: 1;
}
.footer {
  /* 固定定位於底部 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

2. Absolute Centering

Absolute Centering是一種將元素在其父容器內水平、垂直居中的布局方式，它可以使用Position屬性和margin:auto屬性輕鬆實現。

/* html部分 */
<div class="wrapper">
    <div class="content">這個元素將會在其父容器內水平、垂直居中</div>
</div>

/* css部分 */
.wrapper {
  height: 400px;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

三、Position與居中

Position屬性可以配合其他CSS居中屬性實現元素的不同類型居中。

1. 垂直居中

在某些特定的場景下，我們需要將一個元素在其父容器內垂直居中。這時，可以使用Position屬性和margin屬性來解決問題。

/* html部分 */
<div class="wrapper">
    <div class="content">這個元素會垂直居中</div>
</div>

/* css部分 */
.wrapper {
  height: 400px;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  /* 當前元素高度的50% */
  margin-top: -25px;
}

2. 水平、垂直居中

有時候，我們需要將一個元素在其父容器內水平、垂直居中。這時，可以使用Position屬性、Flexbox屬性、以及transform屬性來實現。

/* html部分 */
<div class="wrapper">
   <div class="content">這個元素會水平、垂直居中</div>
</div>

/* css部分 */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}
.content {
  position: relative;
  transform: translate(-50%, -50%);
}

四、總結

Position屬性是CSS布局中最基礎的屬性之一，可以實現各種複雜的頁面布局效果。同時，Position屬性還可以配合其他CSS布局和居中屬性實現更加靈活的頁面布局方式。希望本文可以為大家介紹清楚Position屬性的使用方法，同時也可以引導大家在頁面布局中更加靈活地運用CSS。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/302805.html