HTML中的定位

次我們來說一下，HTML網(wǎng)頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網(wǎng)頁的展示效果中，我們的各種樣式，標(biāo)簽，圖片等東西都是出現(xiàn)在網(wǎng)頁的各個位置，網(wǎng)頁看起來很美觀，各種盒模型擺放合理，這是因?yàn)樵贖TML中有定位的能力，今天我們就來學(xué)習(xí)一下。

position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關(guān)的，position有三個屬性值分別為relative（相對定位：相對于自己原來的位置進(jìn)行定位，但保留自己原來的位置，別的元素?zé)o法占用），absolute（絕對定位：相對于有定位的父級進(jìn)行定位，如果沒有則相對于文檔進(jìn)行定位，定位會脫離文檔，不保留原來的位置，會和原來的文檔不在一個層），fixed（位置定位：他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告，他也會脫離文檔流）。

我們說完了position，接下來我們就說說他是怎么進(jìn)行定位的，我們有l(wèi)eft，top，right，bottom，五個屬性分別對應(yīng) 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個方向前都加了個距字，我們所做的定位是距各個方向的距離而不是移動，例：left:200px，是向右移動200像素，他的意思是距離左邊增加200像素。在我們實(shí)際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對于底部定位的話就很困難。

我們來通過代碼和結(jié)果來看一下：

沒有定位的樣式

加了relative

加了relative的結(jié)果

上面這個結(jié)果圖看著比例不太對是因?yàn)樽髡呓貓D沒截好[捂臉]

我們可以看出貓圖片并沒有移動，而是給兔子圖片留著位置。

加了absolute

加了absolute的結(jié)果

這個結(jié)果我們可以看出貓圖片向前移動了，并沒有保留兔子圖片原來的位置

加了fixed

代碼中的<br>是為了使滑輪可以滑動，以便更好的展示效果。

用了fixed的效果展示。

以上的代碼樣式只對兔子圖片起作用，我沒有給貓?zhí)砑尤魏螛邮剑垐D片只是作為參照物。

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過得還好嗎？

有些時候

為了看到光明

你必須冒險闖入黑暗之中

- 2024.03.29 -

CSS定位屬性是用于控制網(wǎng)頁中元素位置的一種方式，它能夠讓元素在頁面上精準(zhǔn)地落在我們想要的位置。

在CSS中，定位（Positioning）是控制元素在頁面上如何定位和顯示的一種機(jī)制。它主要包括四種屬性：靜態(tài)定位（static）、相對定位（relative）、絕對定位（absolute）、固定定位（fixed）。

每種定位方式都有其獨(dú)特的特點(diǎn)和使用場景，下面將分別介紹這幾種定位屬性。

一、Static（靜態(tài)定位）

靜態(tài)定位是元素的默認(rèn)定位方式，元素按照正常的文檔流進(jìn)行排列。在靜態(tài)定位狀態(tài)下，不能配合top、bottom、left、right來改變元素的位置。

可以用于取消元素之前的定位設(shè)置。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 100px;
}
</style>
</head>
<body>

<div>這是一個靜態(tài)定位的元素。</div>

</body>
</html>

二、Fixed（固定定位）

固定定位使元素相對于瀏覽器窗口進(jìn)行定位，即使頁面滾動，元素也會保持在固定的位置。

固定定位的元素會脫離正常的文檔流。

示例代碼：

<!DOCTYPE html>
<html>
<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">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* 給整個頁面設(shè)置高度，出滾動條以便觀察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

運(yùn)行結(jié)果：

移動前

移動后

比如我們經(jīng)常看到的網(wǎng)頁右下角顯示的“返回到頂部”，就可以用固定定位來實(shí)現(xiàn)。

<!DOCTYPE html>
<html>
<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">
<title>Document</title>
<style>
body {
position: relative;
}
.content {
/* 頁面內(nèi)容樣式 */
}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body style="height: 5000px;">
<div>
</div>
<button id="backToTop" onclick="scrollToTop()">返回頂部</button>
<script>
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
</body>
</html>

運(yùn)行結(jié)果：

三、Relative（相對定位）

相對定位是將元素對于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，通過設(shè)置邊移屬性top、bottom、left、right，使指定元素相對于其正常位置進(jìn)行偏移。如果沒有定位偏移量，對元素本身沒有任何影響。

不使元素脫離文檔流，空間會保留，不影響其他布局。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:relative;/*相對定位*/
left:100px;/*向右偏移100px*/
top:-50px;/*向上偏移50px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

運(yùn)行結(jié)果：

沒使用相對定位之前是這樣的：

使用相對定位后：相對于原來的位置向右偏移了100px，向上偏移50px。

雖然它的位置發(fā)生了變化，但它在標(biāo)準(zhǔn)文檔流中的原位置依然保留。

四、Absolute（絕對定位）

絕對定位使元素相對于最近的非 static 定位祖先元素進(jìn)行定位。如果沒有這樣的元素，則相對于初始包含塊（initial containing block）。絕對定位的元素會脫離正常的文檔流。

如果該元素為內(nèi)聯(lián)元素，則會變成塊級元素，可直接設(shè)置其寬和高的值（讓內(nèi)聯(lián)具備快特性）；
如果該元素為塊級元素，使其寬度根據(jù)內(nèi)容決定。（讓塊具備內(nèi)聯(lián)的特性）

<style>
.wrap{
width:500px;
height:400px;
border: 2px solid red;
}
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:absolute;/*絕對定位*/
left:100px;/*向右偏移100px*/
top:30px;/*向下偏移30px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;

}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

將第二個設(shè)置為絕對定位后，它脫離了文檔流可以定位到頁面的任何地方，在標(biāo)準(zhǔn)文檔流中的原有位置會空出來，所以第三個會排到第一個下面。

第二個相對于它的父元素向右偏移100，向下偏移30。

想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎(chǔ)課程，這個老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想

五、z-index（層級順序的改變）

層疊順序決定了元素之間的堆疊順序。z-index 屬性用于設(shè)置元素的層疊順序。具有較高 z-index 值的元素會覆蓋具有較低 z-index 值的元素。

注意：

默認(rèn)值是0
數(shù)值越大層越靠上
不帶單位
沒有最大值和最小值
可以給負(fù)數(shù)

代碼示例：

<!DOCTYPE html>
<html>
<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">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
}
div:nth-of-type(2){
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
div:nth-of-type(3){
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>

</body>
</html>

運(yùn)行結(jié)果：

可以看到，最后一個div依然存在，但是看不見了，原因就是我們改變了z-index屬性值。

以上就是CSS定位屬性的介紹了，通過這些定位屬性，可以靈活地控制網(wǎng)頁中元素的位置和堆疊順序。

在實(shí)際應(yīng)用中，CSS定位屬性的使用需要考慮到整體布局和用戶體驗(yàn)。合理運(yùn)用這些定位技巧，可以讓你的網(wǎng)頁不僅美觀，而且易于使用和維護(hù)。記住，好的設(shè)計總是細(xì)節(jié)和功能的完美結(jié)合。

我們下期再見！

END

文案編輯|云端學(xué)長

文案配圖|云端學(xué)長

內(nèi)容由：云端源想分享

在線咨詢

上一篇：HTML 表格
下一篇：看電影坐C位還得加價？分區(qū)售票真沒必要

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML中的定位

一、Static（靜態(tài)定位）

二、Fixed（固定定位）

三、Relative（相對定位）

四、Absolute（絕對定位）

五、z-index（層級順序的改變）

您的項(xiàng)目需求