溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中定位position屬性怎么使用

發(fā)布時(shí)間：2021-03-22 11:06:48 來(lái)源：億速云 閱讀：219 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css中定位position屬性怎么使用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

css中定位position屬性的用法：1、一般的標(biāo)簽元素不加任何定位屬性都屬于靜態(tài)定位；2、絕對(duì)定位的元素從文檔流中拖出；3、相對(duì)定位元素不可層疊；4、固定定位與絕對(duì)定位類似，但它是相對(duì)于瀏覽器窗口定位，并且不會(huì)隨著滾動(dòng)條進(jìn)行滾動(dòng)。

css中定位position屬性的用法：

1、靜態(tài)定位（static）

一般的標(biāo)簽元素不加任何定位屬性都屬于靜態(tài)定位，在頁(yè)面的最底層屬于標(biāo)準(zhǔn)流。

2、絕對(duì)定位（absolute）

絕對(duì)定位的元素從文檔流中拖出，使用left、right、top、bottom等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父級(jí)元素進(jìn)行絕對(duì)定位，如果元素的父級(jí)沒(méi)有設(shè)置定位屬性，則依據(jù) body 元素左上角作為參考進(jìn)行定位。絕對(duì)定位元素可層疊，層疊順序可通過(guò) z-index 屬性控制，z-index值為無(wú)單位的整數(shù)，大的在上面，可以有負(fù)值。

絕對(duì)定位的定位方法：

如果它的父元素設(shè)置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就會(huì)相對(duì)于它的父元素來(lái)定位，位置通過(guò)left , top ,right ,bottom屬性來(lái)規(guī)定，

如果它的父元素沒(méi)有設(shè)置定位，那么就得看它父元素的父元素是否有設(shè)置定位，

如果還是沒(méi)有就繼續(xù)向更高層的祖先元素類推，總之它的定位就是相對(duì)于設(shè)置了除static定位之外的定位的第一個(gè)祖先元素，

如果所有的祖先元素都沒(méi)有以上三種定位中的其中一種定位，那么它就會(huì)相對(duì)于文檔body來(lái)定位（并非相對(duì)于瀏覽器窗口，相對(duì)于窗口定位的是fixed）。

<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box  two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>

將class="two"的div定位到距離的頂部和左側(cè)分別50px的位置。會(huì)改變其他元素的布局，不會(huì)在此元素本來(lái)位置留下空白。

3、相對(duì)定位（relative）

相對(duì)定位元素不可層疊，依據(jù)left、right、top、bottom等屬性在正常文檔流中偏移自身位置。同樣可以用z-index分層設(shè)計(jì)。

<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box  two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>

將class="two"的div定位到距離它本來(lái)位置的頂部和左側(cè)分別50px的位置。不會(huì)改變其他元素的布局，會(huì)在此元素本來(lái)位置留下空白。

4、固定定位（fixed）

固定定位與絕對(duì)定位類似，但它是相對(duì)于瀏覽器窗口定位，并且不會(huì)隨著滾動(dòng)條進(jìn)行滾動(dòng)。

固定定位的最常見(jiàn)的一種用途是在頁(yè)面中創(chuàng)建一個(gè)固定頭部、固定腳部或者固定側(cè)邊欄，不需使用margin、border、padding。

關(guān)于“css中定位position屬性怎么使用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手