成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

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

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

在 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
相關推薦

2012-07-25 13:23:32

ibmdw

2021-06-07 14:05:53

物聯網IOT物聯網技術

2022-05-03 17:04:08

CSS前端

2022-02-07 08:58:54

DCIM數據中心

2010-08-27 17:41:03

DIV+CSS

2023-10-30 09:18:28

CSSColumns布局

2021-09-28 10:32:53

循環類型useEffect

2021-07-08 09:17:07

物聯網人工智能IoT

2021-09-13 10:43:12

開發CSS代碼

2010-09-02 14:44:41

DIV CSS表單

2010-08-30 14:57:21

DIV+CSS

2010-08-24 13:01:13

DIV+CSS

2018-12-26 08:00:00

CSS前端

2022-04-27 09:39:11

Mixin工具

2022-09-26 08:03:52

框架ListGuava

2022-05-26 00:06:19

CSSFirefoxElectron

2010-09-02 13:53:58

CSS Sprites

2010-09-14 17:07:26

DIV浮動定位CSS

2010-09-13 16:13:47

DIV CSS表單

2022-12-20 15:17:29

CSS開發
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 国产一区二区 | 日韩亚洲视频在线 | 国产欧美视频一区 | 丁香六月伊人 | 中文字幕一区在线观看视频 | 亚洲三区视频 | 日韩一区二区在线观看视频 | 国产成人a亚洲精品 | 91精品国产91久久久久久 | 国产一级黄色网 | 亚洲一区二区三区桃乃木香奈 | 在线免费看黄 | 色男人的天堂 | 午夜噜噜噜 | 成人一级视频在线观看 | 色婷婷综合久久久久中文一区二区 | 日韩美香港a一级毛片免费 国产综合av | 91精品国产综合久久精品 | 蜜桃视频在线观看免费视频网站www | 国产在线一级片 | 久久久久久综合 | 一级美国黄色片 | 国产乱码一二三区精品 | 久久久久国色av免费观看性色 | 国产精品美女久久久久aⅴ国产馆 | 久久精品91久久久久久再现 | 91成人午夜性a一级毛片 | 日韩av一区二区在线观看 | 久久久久久久国产 | 81精品国产乱码久久久久久 | 毛片视频网址 | 91精品国产色综合久久不卡蜜臀 | www97影院| 国产黄色大片 | 国产欧美日韩在线观看 | 日韩中文不卡 | 国产精品久久久久久久久久久久久 | 超碰在线97国产 | 中国大陆高清aⅴ毛片 | 大陆一级毛片免费视频观看 | 91久久国产|