成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css 定位

warmcheng / 3624人閱讀

摘要：一相對定位相對默認(rèn)的布局位置進行定位，也就是相對自己應(yīng)該在的位置來定位。如果都找不到就是以根節(jié)點為定位點。設(shè)置絕對定位之后，塊級元素寬度會收縮，寬度由內(nèi)容決定。因此當(dāng)滾動產(chǎn)生時，固定定位元素依然處于窗口的某個固定位置。

一、相對定位

position: relative
相對默認(rèn)的布局位置進行定位，也就是相對自己應(yīng)該在的位置來定位。

.avatar {
  top: 3px; //從上到下偏移3px
  left: 7px; //從左到右偏移7px
  position: relative;
}

相對定位是沒有脫離普通文檔流的，對于頁面其他元素，box2還是待在原位的。

二、絕對定位

position: absolute

.box {
position:absolute;
top:10px;//相對定位點，從上到下偏移10px
left:10px; //相對定位點，從左到右偏移10px
}

絕對定位元素脫離正常文檔流，其他元素就看不見它。絕對定位元素也看不見絕對定位元素。所以下圖2個box2發(fā)生了重疊

絕對定位的定位對象是從它的父元素找是否有relative/fix/absolute。如果父元素設(shè)置了relative/fix/absolute，那父元素就是絕對定位元素的定位點，如果父元素沒有設(shè)置relative/fix/absolute，就繼續(xù)往上找，直到body和html為止。如果都找不到就是以html根節(jié)點為定位點。

所以使用absolute絕對定位的時候，最好在父元素上設(shè)置相對定位relative。

設(shè)置絕對定位之后，塊級元素寬度會收縮，寬度由內(nèi)容決定。行內(nèi)元素可以設(shè)置寬高，內(nèi)外邊距。

三、z-index

z-index詳細介紹
1、z-index 定義：
屬性設(shè)置元素的堆疊順序，該屬性設(shè)置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負數(shù)則表示離用戶更遠。也就是說擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

2、遇到的坑：
（1）、父元素z-index值更高，無論其子元素的z-index值大小，都可以覆蓋z-index值比父元素小的元素。

（2）、如果z-index的值為auto，不會構(gòu)成疊層上下文。

如下去掉div3的z-index，div3的子元素div4和div6都直接和div3同級的div1/div2相互疊層。demo


（3）、父子關(guān)系的z-index 如何設(shè)置，不影響它和 box 的堆疊順序。但我發(fā)現(xiàn)如果不設(shè)置父元素的z-index，然后再把子元素的z-index值設(shè)置為負數(shù)。父元素就會直接覆蓋子元素。
如下圖，box1沒有設(shè)置z-index，設(shè)置tooltip的z-index為負，box1就覆蓋了tooltip
demo鏈接鏈接描述，目前不得其意，之后補坑

四、固定定位

position: fixed
相對瀏覽器窗口進行定位。因此當(dāng)滾動產(chǎn)生時，固定定位元素依然處于窗口的某個固定位置。
比如說瀏覽器右邊 回到頂部的按鈕就是采用的固定定位。

.feedback {
  right: 30px;
  bottom: 30px;
  position: fixed;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114191.html

相關(guān)文章

  • CSS入門指南-3：定位元素

    摘要：靜態(tài)定位下，每個元素在處在常規(guī)文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對于頂級元素在定位。事實上，一個相對定位元素同時設(shè)置了和位移屬性值，實際上優(yōu)先級高于。 這是《CSS設(shè)計指南》的讀書筆記，用于加深學(xué)習(xí)效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

    paulquei 評論0 收藏0

  • CSS入門指南-3：定位元素

    摘要：靜態(tài)定位下，每個元素在處在常規(guī)文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對于頂級元素在定位。事實上，一個相對定位元素同時設(shè)置了和位移屬性值，實際上優(yōu)先級高于。 這是《CSS設(shè)計指南》的讀書筆記，用于加深學(xué)習(xí)效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

    DesGemini 評論0 收藏0

  • position 的屬性值

    摘要：注意當(dāng)該固定元素的祖先元素的屬性非時，容器由瀏覽器窗口改為該祖先元素粘性定位，相當(dāng)于相對定位和固定定位的混合。粘性定位根據(jù)一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...

    番茄西紅柿 評論0 收藏0

  • CSS 中的定位

    摘要：塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。元素框從文檔流完全刪除，并相對于其包含塊定位。中的文檔流標(biāo)準(zhǔn)文檔流文檔流指的是元素排版布局過程中，元素會默認(rèn)自動從左往右，從上往下的流式排列方式。 1 CSS 中的定位 1.1 了解定位（positioning） 定位的基本思想： 它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元...

    beanlam 評論0 收藏0

  • 前端菜鳥筆記 Day-4 CSS布局

    摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創(chuàng)建浮動框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) CSS框模型 寬度和高度 內(nèi)邊距 外邊距 CSS定位 浮動 CSS框模型 內(nèi)容引用：CSS 框模型概述 CSS 框模...

    go4it 評論0 收藏0

  • 前端菜鳥筆記 Day-4 CSS布局

    摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創(chuàng)建浮動框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) CSS框模型 寬度和高度 內(nèi)邊距 外邊距 CSS定位 浮動 CSS框模型 內(nèi)容引用：CSS 框模型概述 CSS 框模...

    Honwhy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<