溫馨提示×

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

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

CSS定位的使用方法

發(fā)布時(shí)間：2021-08-07 20:30:49 來源：億速云 閱讀：185 作者：chen 欄目：大數(shù)據(jù)

這篇文章主要介紹“CSS定位的使用方法”，在日常操作中，相信很多人在CSS定位的使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS定位的使用方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

定位的使用包含兩個(gè)部分：

  1. 定位的方式

  1. 偏移值  left,right,top,bottom偏移值準(zhǔn)確的理解是“距離什么位置有多大”  如 top:100px; 距離頂部為100像素 （向下走）。
    ####靜態(tài)定位
    所有的標(biāo)準(zhǔn)流都是靜態(tài)定位

position:static;

  • 一般用于將某些已經(jīng)定位的元素還原成標(biāo)準(zhǔn)流，用的很少

  • 偏移值對(duì)于靜態(tài)定位來說不起作用，我們以后說的元素定位不包括靜態(tài)定位

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .box {            width: 300px;            height: 300px;            background-color: red;            position: static;            left: 500px;            top: 500px;        }    </style></head><body><div class="box"></div></body></html>

####相對(duì)定位
相對(duì)定位是相對(duì)自己的標(biāo)準(zhǔn)流的位置進(jìn)行定位移動(dòng)

position:relative;

特性：
1. 移動(dòng)的出發(fā)點(diǎn)是自身標(biāo)準(zhǔn)流的位置
2. 相對(duì)定位移動(dòng)的元素不會(huì)對(duì)別的元素產(chǎn)生干擾，“沒有脫標(biāo)”，真正占得位置還是標(biāo)準(zhǔn)流的位置（肉體不在 靈魂永駐）
3. 可以蓋在標(biāo)準(zhǔn)流的上方
4. 一般用于微調(diào)元素和配合絕對(duì)定位來實(shí)現(xiàn)效果
####絕對(duì)定位

position:absolute;

特性：
1.移動(dòng)的出發(fā)點(diǎn)：
從絕對(duì)元素開始一直往上級(jí)找（直到找到最大的html標(biāo)簽），在這個(gè)過程中，只要有一個(gè)元素（A元素）是定位（相對(duì)，絕對(duì)，固定）的任何一個(gè)，這個(gè)絕對(duì)定位的元素就會(huì)參照這個(gè)A元素進(jìn)行定位，并且不會(huì)在往上找了，如果一個(gè)都沒有，最終會(huì)以html元素定位
2.脫標(biāo)
1.1. 脫標(biāo)的元素不占標(biāo)準(zhǔn)流的位置
1.2. 不會(huì)繼承父級(jí)的的寬度，內(nèi)容有多個(gè)就撐多大 （不論塊級(jí)還是行內(nèi)）
1.3. 可以直接寫寬高 （不論塊級(jí)還是行內(nèi)）
1.4. margin:auto對(duì)于脫標(biāo)元素不起作用
巧妙運(yùn)用：讓一個(gè)定位盒子水平垂直居中

使用方式：
在工作中，絕對(duì)定位"大多"配合相對(duì)定位一起使用（父相子絕）
父相：在標(biāo)準(zhǔn)流上占有位置
子絕：針對(duì)這個(gè)標(biāo)準(zhǔn)流在去移動(dòng)
注意：父絕子絕的情況也有，只是很少，不要完全形成思維定式。
####固定定位

特性：
1.脫標(biāo)
1.1.脫標(biāo)的元素不占標(biāo)準(zhǔn)流的位置
1.2.不會(huì)繼承父級(jí)的的寬度，內(nèi)容有多個(gè)就撐多大 （不論塊級(jí)還是行內(nèi)）
1.3.可以直接寫寬高 （不論塊級(jí)還是行內(nèi)）
1.4.margin:auto對(duì)于脫標(biāo)元素不起作用
2.移動(dòng)的出發(fā)點(diǎn)：瀏覽器窗口 （直接表現(xiàn)：滾動(dòng)條對(duì)于固定元素沒有作用）

四種定位總結(jié)

定位模式是否脫標(biāo)占有位置是否可以使用邊偏移移動(dòng)位置基準(zhǔn)
靜態(tài)static不脫標(biāo)正常模式不可以正常模式
相對(duì)定位relative不脫標(biāo)占有位置可以相對(duì)自身位置移動(dòng)
絕對(duì)定位absolute完全脫標(biāo)，不占有位置可以相對(duì)于定位的父級(jí)移動(dòng)位置
固定定位fixed完全脫標(biāo)，不占有位置可以相對(duì)于瀏覽器移動(dòng)位置

####z-index
控制“定位”元素的疊放層級(jí)

  1. z-index只針對(duì)定位元素有效果

  1. z-index值越大，層級(jí)越高

  1. 如果父元素已經(jīng)比較過層級(jí)了（父元素“都有”z-index的時(shí)候，并且值不為auto），那么子元素與子元素之間是不會(huì)再去比較的

到此，關(guān)于“CSS定位的使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(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)容。

css
AI
助
手