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

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

我們開始吧！

【資料圖】

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

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

1）Static

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

將 top、right、bottom 或 left 屬性應(yīng)用于靜態(tài)定位的元素將不會(huì)產(chǎn)生任何效果。z-index 也不適用于靜態(tài)元素。

語法：

position: static;

舉個(gè)例子：

                              
Box1
    
Box2
    
Box3
  

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 個(gè)盒子，它們都具有相同的高度和寬度。position: static;屬性僅應(yīng)用于第二個(gè)框。

但是，第二個(gè)框的布局與其他兩個(gè)框沒有區(qū)別，因?yàn)?static 是所有 HTML 元素的默認(rèn)值。

2) relative

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

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

語法：

position: relative;

舉個(gè)例子：

                              
Box1
    
Box2
    
Box3
  

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

輸出：

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

3）absolute

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

語法：

position: absolute;

舉個(gè)例子：

                              
Box1
    
      
Box2
    
    
Box3
  

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

輸出：

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

如果沒有祖先怎么辦？

然后該元素將相對(duì)于視口定位。

例如：

                              
Box1
    
Box2
    
Box3
  

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

使用位置：固定元素相對(duì)于視口定位，并且即使頁面滾動(dòng)也保持固定。

語法：

position: fixed;

舉個(gè)例子：

                              
Box1
    
Box2
    
Box3
    
    
    
    
    
    
    
    
  

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

輸出：

在上面的示例中，即使向下滾動(dòng)頁面，第二個(gè)框的位置也將是固定的。

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

5）sticky

使用position: sticky;元素根據(jù)用戶的滾動(dòng)位置進(jìn)行定位。它的行為類似于相對(duì)元素，直到用戶滾動(dòng)到某個(gè)位置，之后它相對(duì)于其包含元素或視口變得固定。

語法：

position: sticky;

舉例：

                              
Box1
    
Box2
    
Box3
    
    
    
    
    
    
    
    
  

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

在上面的示例中，第二個(gè)框?qū)⒈憩F(xiàn)得像一個(gè)相對(duì)元素，直到它到達(dá)位置 top: 50px; 滾動(dòng)時(shí)，它將表現(xiàn)得像一個(gè)固定元素。

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

位置屬性有以下可能值：

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

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

總結(jié)

到這里，今天這篇文章想要與您分享的內(nèi)容就結(jié)束了，希望對(duì)您有所幫助。

最后，感謝您的閱讀。

關(guān)鍵詞：