div定位和css的層疊

2021-08-27 19:42:14 字數 894 閱讀 5721

概述:  在web開發中相信最開始學習的時候,希望能將div放到我們希望放到的地方和窗體的層疊,看似簡單的問題 對於我們這些菜鳥來說確實很困難的,下面就介紹窗體的定位和層疊

top	定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

position 定義窗體的位置 相對位置和絕對位置

overflow  設定當元素的內容溢位其區域時發生的事情。

z-index:設定窗體的層 index越大層就在最上面,預設為0

overflow的屬性;

visible	預設值。內容不會被修剪,會呈現在元素框之外。

hidden 內容會被修剪,並且其餘內容是不可見的。

scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。

auto 如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。

絕對定位; position:absolute  

相對定位;position:relative

css 不使用定位的 div層疊

想要達到的效果是 下面兩個123被藍色的遮住,使用了上下兩個div 下面的div margin top 負數 移上去蓋住了上面的div卻蓋不住字 最後使用了 下面的css 樣式 達到了效果 transform translate3d 0px,0px,0px webkit transform tran...

CSS定位 層疊效果和浮動 04

1 絕對定位 2 相對定位 相對定位的位置是相對於元素自身的正常初始位置而言的。因此,即使是內容完全一樣的相對定位 作用於初始位置不同的多個元素上也僅能保證位移的方向一致,並不能代表這些元素最終將出現在相同的位置上。3 層疊效果 在css中,除了定義在html元素在水平和垂直方向上的位置,還可以定義...

div相對定位和div絕對定位

1,內外層均不設定postion,一般巢狀關係。2,僅外div設定relative,一般巢狀關係。3,僅內div設定absolute,文件中為巢狀關係,頁面中內div浮起 非float 相對於頁面定位,與外div無關。4,外div設定relative,內div設定absolute,內div浮起來並相...