CSS定位屬性用CSS定位屬性精確控制你的網(wǎng)頁(yè)布局！

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

嗨~ 今天的你過(guò)得還好嗎？

有些時(shí)候

為了看到光明

你必須冒險(xiǎn)闖入黑暗之中

- 2024.03.29 -

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

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

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

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

靜態(tài)定位是元素的默認(rèn)定位方式，元素按照正常的文檔流進(jìn)行排列。在靜態(tài)定位狀態(tài)下，不能配合top、bottom、left、right來(lái)改變?cè)氐奈恢谩?/p>

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

代碼示例：

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

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

</body>
</html>

二、Fixed（固定定位）

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

固定定位的元素會(huì)脫離正常的文檔流。

示例代碼：

<!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{
/* 給整個(gè)頁(yè)面設(shè)置高度，出滾動(dòng)條以便觀察 */
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é)果：

移動(dòng)前

移動(dòng)后

比如我們經(jīng)常看到的網(wǎng)頁(yè)右下角顯示的“返回到頂部”，就可以用固定定位來(lái)實(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 {
/* 頁(yè)面內(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（相對(duì)定位）

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

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

代碼示例：

<!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;/*相對(duì)定位*/
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é)果：

沒(méi)使用相對(duì)定位之前是這樣的：

使用相對(duì)定位后：相對(duì)于原來(lái)的位置向右偏移了100px，向上偏移50px。

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

四、Absolute（絕對(duì)定位）

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

如果該元素為內(nèi)聯(lián)元素，則會(huì)變成塊級(jí)元素，可直接設(shè)置其寬和高的值（讓內(nèi)聯(lián)具備快特性）；
如果該元素為塊級(jí)元素，使其寬度根據(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;/*絕對(duì)定位*/
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>

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

第二個(gè)相對(duì)于它的父元素向右偏移100，向下偏移30。

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

五、z-index（層級(jí)順序的改變）

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

注意：

默認(rèn)值是0
數(shù)值越大層越靠上
不帶單位
沒(méi)有最大值和最小值
可以給負(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é)果：

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

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

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

我們下期再見(jiàn)！

END

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

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

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

>position 屬性是布局函數(shù)的關(guān)鍵工具，通過(guò)改變?cè)氐奈恢煤痛笮傩浴Ａ私馊绾握_設(shè)置這個(gè)屬性將有助于根據(jù)要求對(duì)頁(yè)面進(jìn)行最出色的布局。 position 屬性使頁(yè)面渲染和布局更加靈活并便于設(shè)計(jì)更("\\( \ )"精心處理的頁(yè)面。

取一個(gè)網(wǎng)頁(yè)，我們需要了解一下網(wǎng)頁(yè)的結(jié)構(gòu)，如果想要深入學(xué)習(xí)，建議看一下《網(wǎng)頁(yè)設(shè)計(jì)與制作》，這本書(shū)講述較為詳細(xì)，推薦閱讀。

網(wǎng)頁(yè)的三大組成部分——HTML、CSS、JavaScript，如果把網(wǎng)頁(yè)比作一個(gè)人的話，HTML相當(dāng)于骨架，JavaScript相當(dāng)于肌肉，而CSS相當(dāng)于皮膚，三者結(jié)合起來(lái)形成一個(gè)完整的網(wǎng)頁(yè)。

網(wǎng)頁(yè)基本結(jié)構(gòu)

1.HTML

HTML（Hyter Markup Language 超文本標(biāo)記語(yǔ)言），主要是通過(guò)HTML標(biāo)記對(duì)網(wǎng)頁(yè)中的文本、圖片、聲音等內(nèi)容進(jìn)行描述。HTML提供了很多種標(biāo)記，如段落標(biāo)記（p標(biāo)簽）、圖片標(biāo)記（img標(biāo)簽）、視頻標(biāo)記（video標(biāo)簽）等，網(wǎng)頁(yè)中需要定義什么內(nèi)容，就可以用相應(yīng)的標(biāo)記描述。

首頁(yè)源代碼

從圖可見(jiàn)，網(wǎng)頁(yè)內(nèi)容是通過(guò)HTML標(biāo)記（圖中帶有“<>”的符號(hào)）描述的，整個(gè)網(wǎng)頁(yè)由各種標(biāo)簽嵌套而成。

2.CSS

HTML其實(shí)是一個(gè)純文本文件，只是網(wǎng)頁(yè)的一個(gè)骨架，只有HTML的網(wǎng)頁(yè)其實(shí)并不美觀，為了讓網(wǎng)頁(yè)看起來(lái)更好看，我們需要借助CSS。

CSS（Cascading Style Sheets 層疊樣式表），“層疊”指的當(dāng)HTML中引用了數(shù)個(gè)樣式文件，并且樣式發(fā)生沖突時(shí)，瀏覽器能依據(jù)層疊順序處理，“樣式”指的是網(wǎng)頁(yè)文字、圖片等的大小、顏色、排列等格式。

body {
    font: 12px/1.14 SF Pro Display,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #333;
    outline: 0;
}
font、color、outline即樣式設(shè)置

CSS的位置很靈活，即可以嵌入在HTML文檔中，也可以時(shí)一個(gè)單獨(dú)的外部文件，如果是獨(dú)立的文件，則必須以.css為擴(kuò)展名，使用link標(biāo)簽引入文件。上圖CSS顯示為內(nèi)嵌方式，一般集中放在HTML文檔頭部（<head>標(biāo)簽內(nèi)）。

3.JavaScript

JavaScript，簡(jiǎn)稱(chēng)JS，是一種腳本語(yǔ)言，可使網(wǎng)頁(yè)具有交互性（HTML和CSS制作的網(wǎng)頁(yè)是靜態(tài)網(wǎng)頁(yè)），js腳本語(yǔ)言使得用戶(hù)與信息是一種實(shí)時(shí)、動(dòng)態(tài)、交互的頁(yè)面功能，如頁(yè)面效果切換、動(dòng)畫(huà)效果、頁(yè)面游戲等，它還可以控制cookies，包括創(chuàng)建和修改等。

JavaScript通常也是以單獨(dú)文件形式加載，后綴為js，在HTML中通過(guò)script標(biāo)簽引入，如<scrip src="jquery-2.1.0.js" type="text/javascript"></script>。

4.爬蟲(chóng)的基本原理

我們可以把互聯(lián)網(wǎng)看作一張大網(wǎng)，而爬蟲(chóng)（即網(wǎng)絡(luò)爬蟲(chóng)）就是在網(wǎng)上爬行的蜘蛛，把網(wǎng)的節(jié)點(diǎn)比作一個(gè)個(gè)網(wǎng)頁(yè)，爬蟲(chóng)爬到一個(gè)節(jié)點(diǎn)就相當(dāng)于訪問(wèn)了該頁(yè)面，獲取了其信息，節(jié)點(diǎn)之間的線就像與網(wǎng)頁(yè)與網(wǎng)頁(yè)之間的鏈接關(guān)系，蜘蛛可順著節(jié)點(diǎn)連接繼續(xù)爬行到下一個(gè)節(jié)點(diǎn)，即通過(guò)一個(gè)網(wǎng)頁(yè)爬取另一個(gè)網(wǎng)頁(yè)，這樣整個(gè)網(wǎng)的節(jié)點(diǎn)都可以被爬取到了。

那么爬蟲(chóng)的基本過(guò)程可以簡(jiǎn)單概述為：獲取網(wǎng)頁(yè)——提取信息——保存數(shù)據(jù)。

靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)

靜態(tài)網(wǎng)頁(yè)：用HTML代碼編寫(xiě)的頁(yè)面，每個(gè)網(wǎng)頁(yè)都有一個(gè)固定的URL，加載速度快，編寫(xiě)簡(jiǎn)單，但可維護(hù)性差、交互性差，不能根據(jù)URL靈活多變地顯示內(nèi)容。

動(dòng)態(tài)網(wǎng)頁(yè)：以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可以大大降低網(wǎng)站維護(hù)的工作量，它可以動(dòng)態(tài)解析URL參數(shù)的變化，關(guān)聯(lián)數(shù)據(jù)庫(kù)并動(dòng)態(tài)呈現(xiàn)不同的頁(yè)面內(nèi)容，可以實(shí)現(xiàn)用戶(hù)登錄與注冊(cè)功能。

在線咨詢(xún)

上一篇：前端入門(mén)-html 中如何使用圖片
下一篇：如何使用JavaScript獲取百分比寬度元素的像素寬度

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS定位屬性用CSS定位屬性精確控制你的網(wǎng)頁(yè)布局！

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

二、Fixed（固定定位）

三、Relative（相對(duì)定位）

四、Absolute（絕對(duì)定位）

五、z-index（層級(jí)順序的改變）

1.HTML

2.CSS

3.JavaScript

4.爬蟲(chóng)的基本原理

靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)

您的項(xiàng)目需求