五種 CSS 位置類型以實現更好的布局

作者：佚名 2023-08-22 13:18:00

開發前端

在 Web 開發中，CSS（層疊樣式表）用于設置網站樣式的設置。為了控制網頁上元素的布局，使用CSS的position屬性。

因此，在今天這篇文章中，我們將了解 CSS 位置及其類型。

我們開始吧！

CSS 位置屬性用于控制網頁上元素的位置。它定義了元素相對于其包含元素或視口的定位方式。

以下是位置屬性的可能值：

1）Static

這是所有 HTML 元素定位的默認值。在此定位中，元素按照文檔的正常流程定位，這意味著它們按照 HTML 結構一個接一個地定位。此模式下元素的位置由其邊距和填充決定。

將 top、right、bottom 或 left 屬性應用于靜態定位的元素將不會產生任何效果。z-index 也不適用于靜態元素。

語法：

position: static;

舉個例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: static;
}
.box3 {
  background-color: green;
}

輸出：

在上面的例子中，我們有 3 個盒子，它們都具有相同的高度和寬度。position: static;屬性僅應用于第二個框。

但是，第二個框的布局與其他兩個框沒有區別，因為 static 是所有 HTML 元素的默認值。

2) relative

使用position: relative元素遵循其正常的文檔流，但可以從其原始位置移動。這可以使用 top、right、bottom 和 left 屬性來實現。

使用此屬性，周圍的元素不會受到影響，但元素原本處于靜態位置的位置將會有空間。

語法：

position: relative;

舉個例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: relative;
  top: 20px;
  left: 50px;
}
.box3 {
  background-color: green;
}

輸出：

在上面的示例中，第二個框向下移動 20 像素（使用 top 屬性），向右移動 50 像素（使用 left 屬性）。移動的框不會影響周圍元素（框 1 和框 3）的位置。

3）absolute

使用position:absolute的元素不遵循文檔的正常流程。該元素相對于其最近定位的祖先（具有相對、絕對、固定或粘性定位的元素）進行定位。

語法：

position: absolute;

舉個例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="container">
      <div class="box box2">Box2</div>
    </div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS：

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.container {
  border: 3px solid black;
  height: 200px;
  width: 200px;
  position: relative;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: absolute;
  top: 30px;
  left: 50px;
}
.box3 {
  background-color: green;
}

輸出：

在上面的示例中，第二個盒子位于容器內。容器的位置設置為相對，第二個框的位置設置為絕對，并且該框向下移動 30 像素（使用 top 屬性），向右移動 50 像素（使用 left 屬性）。容器是第二個盒子的祖先。

如果沒有祖先怎么辦？

然后該元素將相對于視口定位。

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS：

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: absolute;
  top: 30px;
  left: 50px;
}
.box3 {
  background-color: green;
}

輸出：

4）fixed

使用位置：固定元素相對于視口定位，并且即使頁面滾動也保持固定。

語法：

position: fixed;

舉個例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
</html>

CSS：

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
  border: 1px solid black;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: fixed;
  top: 50px;
  left: 50px;
}
.box3 {
  background-color: green;
}

輸出：

在上面的示例中，即使向下滾動頁面，第二個框的位置也將是固定的。

有了這個屬性，就不像position:relative; 元素原本處于靜態位置的位置將不再有空間。

5）sticky

使用position: sticky;元素根據用戶的滾動位置進行定位。它的行為類似于相對元素，直到用戶滾動到某個位置，之后它相對于其包含元素或視口變得固定。

語法：

position: sticky;

舉例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
</html>

CSS：

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
  border: 1px solid black;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: sticky;
  top: 50px;
  left: 50px;
}
.box3 {
  background-color: green;
}

在上面的示例中，第二個框將表現得像一個相對元素，直到它到達位置 top: 50px; 滾動時，它將表現得像一個固定元素。

CSS 中的position 屬性確定元素相對于其包含元素或視口的位置。

位置屬性有以下可能值：

static：這是所有 HTML 元素的默認定位。元素按照文檔的正常流程定位并遵循 HTML 結構。
relative：具有position：relative的元素遵循其正常的文檔流，但可以從其原始位置移動。
絕對：使用位置：絕對的元素不遵循文檔的正常流程。該元素相對于其最近定位的祖先進行定位。如果沒有祖先，則該元素將相對于視口定位。
固定：具有位置：固定的元素相對于視口定位，并且即使頁面滾動也保持固定。
Sticky：具有position：sticky的元素根據用戶的滾動位置進行定位。

通過充分掌握位置屬性，我們可以在網頁中獲得所需的布局和交互。

總結

到這里，今天這篇文章想要與您分享的內容就結束了，希望對您有所幫助。

最后，感謝您的閱讀。

責任編輯：華軒來源： web前端開發

Web 開發 CSS