五種 CSS 位置類型以實(shí)現(xiàn)更好的布局
在 Web 開(kāi)發(fā)中，CSS（層疊樣式表）用于設(shè)置網(wǎng)站樣式的設(shè)置。為了控制網(wǎng)頁(yè)上元素的布局，使用CSS的position屬性。
因此，在今天這篇文章中，我們將了解 CSS 位置及其類型。
我們開(kāi)始吧！
CSS 位置屬性用于控制網(wǎng)頁(yè)上元素的位置。它定義了元素相對(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)元素。
語(yǔ)法：
position: static;舉個(gè)例子：
<!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 個(gè)盒子，它們都具有相同的高度和寬度。position: static;屬性僅應(yīng)用于第二個(gè)框。
但是，第二個(gè)框的布局與其他兩個(gè)框沒(méi)有區(qū)別，因?yàn)?static 是所有 HTML 元素的默認(rèn)值。
2) relative
使用position: relative元素遵循其正常的文檔流，但可以從其原始位置移動(dòng)。這可以使用 top、right、bottom 和 left 屬性來(lái)實(shí)現(xiàn)。
使用此屬性，周圍的元素不會(huì)受到影響，但元素原本處于靜態(tài)位置的位置將會(huì)有空間。
語(yǔ)法：
position: relative;舉個(gè)例子：
<!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;
}輸出：
在上面的示例中，第二個(gè)框向下移動(dòng) 20 像素（使用 top 屬性），向右移動(dòng) 50 像素（使用 left 屬性）。移動(dòng)的框不會(huì)影響周圍元素（框 1 和框 3）的位置。
3）absolute
使用position:absolute的元素不遵循文檔的正常流程。該元素相對(duì)于其最近定位的祖先（具有相對(duì)、絕對(duì)、固定或粘性定位的元素）進(jìn)行定位。
語(yǔ)法：
position: absolute;舉個(gè)例子：
<!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;
}輸出：
在上面的示例中，第二個(gè)盒子位于容器內(nèi)。容器的位置設(shè)置為相對(duì)，第二個(gè)框的位置設(shè)置為絕對(duì)，并且該框向下移動(dòng) 30 像素（使用 top 屬性），向右移動(dòng) 50 像素（使用 left 屬性）。容器是第二個(gè)盒子的祖先。
如果沒(méi)有祖先怎么辦？
然后該元素將相對(duì)于視口定位。
例如：
<!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
使用位置：固定元素相對(duì)于視口定位，并且即使頁(yè)面滾動(dòng)也保持固定。
語(yǔ)法：
position: fixed;舉個(gè)例子：
<!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;
}輸出：
在上面的示例中，即使向下滾動(dòng)頁(yè)面，第二個(gè)框的位置也將是固定的。
有了這個(gè)屬性，就不像position:relative; 元素原本處于靜態(tài)位置的位置將不再有空間。
5）sticky
使用position: sticky;元素根據(jù)用戶的滾動(dòng)位置進(jìn)行定位。它的行為類似于相對(duì)元素，直到用戶滾動(dòng)到某個(gè)位置，之后它相對(duì)于其包含元素或視口變得固定。
語(yǔ)法：
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;
}在上面的示例中，第二個(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)行定位。如果沒(méi)有祖先，則該元素將相對(duì)于視口定位。
- 固定：具有位置：固定的元素相對(duì)于視口定位，并且即使頁(yè)面滾動(dòng)也保持固定。
- Sticky：具有position：sticky的元素根據(jù)用戶的滾動(dòng)位置進(jìn)行定位。
通過(guò)充分掌握位置屬性，我們可以在網(wǎng)頁(yè)中獲得所需的布局和交互。
總結(jié)
到這里，今天這篇文章想要與您分享的內(nèi)容就結(jié)束了，希望對(duì)您有所幫助。
最后，感謝您的閱讀。
