css 定位

warmcheng 發布于2019-08-29 17:14 / 3598人閱讀

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

一、相對定位

position: relative
相對默認的布局位置進行定位，也就是相對自己應該在的位置來定位。

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

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

二、絕對定位

position: absolute

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

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

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

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

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

三、z-index

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

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

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

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

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

四、固定定位

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

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

云服務器 GPU云服務器相對定位-絕對定位人臉定位圖片定位相對定位

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114191.html

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

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

paulquei 2019-08-29 13:01 評論0 收藏0
CSS入門指南-3：定位元素

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

DesGemini 2019-08-01 17:15 評論0 收藏0
position 的屬性值

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

番茄西紅柿 2019-04-23 13:30 評論0 收藏0
CSS 中的定位

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

beanlam 2019-08-23 18:23 評論0 收藏0
前端菜鳥筆記 Day-4 CSS布局

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

go4it 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-4 CSS布局

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

Honwhy 2019-08-02 14:12 評論0 收藏0