溫馨提示×

溫馨提示×

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

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

定位(positioning)

發(fā)布時間：2020-06-27 23:58:17 來源：網(wǎng)絡(luò) 閱讀：238 作者：yuxin1234567890 欄目：網(wǎng)絡(luò)安全

一、position（檢索對象的定位方式）

 1.語法 position: static / relative /absolute /fixed /center /page /sticky

  • static：對象遵循常規(guī)流。此時4個定位偏移屬性不會被應(yīng)用。

  • relative：對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個定位偏移屬性進(jìn)行偏移時不會影響常規(guī)流中的任何元素。

  • absolute：對象脫離常規(guī)流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。

  • fixed：與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動條時，對象不會隨著滾動。

  • center：與absolute一致，但偏移定位是以定位祖先元素的中心點(diǎn)為參考。盒子在其包含容器垂直水平居中。（CSS3）

  • page：與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）

  • sticky：對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時按常規(guī)流排版，當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果。（CSS3）

 2.說明

檢索對象的定位方式。

  • 當(dāng)position的值為非static時，其層疊級別通過z-index屬性定義。

  • 絕對定位的元素，在top，right，bottom，left屬性未設(shè)置時，會緊隨在其前面的兄弟元素之后，但在位置上不影響常規(guī)流中的任何元素。

  • 對應(yīng)的腳本特性為position。

 3.舉例  

    <!DOCTYPE html>

    <html lang="zh-cmn-Hans">

    <head>

        <meta charset="utf-8" />

        <title>position_CSS參考手冊_web前端開發(fā)參考手冊</title>

        <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />

        <style>

            #position {

             position: absolute;

        top: 50%;

        left: 50%;

        width: 150px;

        height: 40px;

        margin: -20px 0 0 -75px;

        padding: 0 10px;

        background: #eee;

        line-height: 2.4;

            }

        </style>

    </head>

    <body>

        <div id="position">水平垂直居中的對象</div>

    </body>

    </html>

    

二、z-index（檢索或設(shè)置對象的層疊順序）

 1.語法 z-index:auto/integer

 2.取值  

  • auto：元素在當(dāng)前層疊上下文中的層疊級別是0。元素不會創(chuàng)建新的局部層疊上下文，除非它是根元素。

  • integer：用整數(shù)值來定義堆疊級別?？梢詾樨?fù)值。

 3.說明

   檢索或設(shè)置對象的層疊順序。

  • z-index用于確定元素在當(dāng)前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文。

  • 每個元素層疊順序由所屬的層疊上下文和元素本身的層疊級別決定（每個元素僅屬于一個層疊上下文）。

  • 同一個層疊上下文中，層疊級別大的顯示在上面，反之顯示在下面。

  • 同一個層疊上下文中，層疊級別相同的兩個元素，依據(jù)它們在HTML文檔流中的順序，寫在后面的將會覆蓋前面的。

  • 不同層疊上下文中，元素的顯示順序依據(jù)祖先的層疊級別來決定，與自身的層疊級別無關(guān)。

  • 當(dāng)z-index未定義或者值為auto時，在IE6,7下會創(chuàng)建新的局部層疊上下文，而在高級瀏覽器中，按照規(guī)范不產(chǎn)生新的局部層疊上下文，如下例：

  3.舉例

    <!DOCTYPE html>

    <html lang="zh-cmn-Hans">

    <head>

        <meta charset="utf-8" />

        <title>z-index_CSS參考手冊_web前端開發(fā)參考手冊系列</title>

        <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com"         />

        <style>

        .z1,

        .z2,

        .z3 {

         position: absolute;

         width: 200px;

         height: 100px;

         padding: 5px 10px;

         color: #fff;

         text-align: right;

        }

        .z1 {

     z-index: 1;

background: #000;

}

.z2 {

z-index: 2;

top: 30px;

left: 30px;

background: #C00;

}

.z3 {

z-index: 3;

top: 60px;

left: 60px;

background: #999;

}

</style>

</head>

<body>

<div class="z1">z-index:1</div>

<div class="z2">z-index:2</div>

<div class="z3">z-index:3</div>

</body>

</html>





三、top

四、right

五、bottom

六、left

七、clip

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

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

AI
助
手