CSS入門筆記4目錄
- 分層div,CSS定位position,層疊背景關系
- 前言
- 一. div分層
- 1.1 背景范圍是從哪到哪？背景顏色div在什么位置
- 思路
- 程序
- 結論
- 1.2 那文字內容在什么位置呢？
- 思路
- 程序
- 結論
- 1.3 那塊級子元素在什么位置呢？
- 思路
- 程序
- 結論
- 1.4 那浮動元素又在什么位置呢？
- 思路
- 程序
- 結論
- 1.5 綜上所述可以驗證得出此圖:
- 二. CSS定位position
- position的五個取值
- 2.1 static
- 2.2 relative 相對定位
- 2.3.absolute絕對定位
- 2.4 fixd 相對視口定位
- 2.5 sticky 粘滯定位
- 三 層疊背景關系
- 3.1 定位元素位置
- 結論
- 3.2 那是不是定位元素都可以取決于z-index大小呢？
- 結論：
- 3.3 哪些屬性可以創建層疊背景關系呢？
分層div,CSS定位position,層疊背景關系
前言
這是我學習路上總結的知識點，原始碼圖文詳細介紹分層div,CSS定位position,層疊背景關系，希望對大家有所幫助，本人也會持續高更，新的一年里一起共同進步吧！
一. div分層
接下來就使驗證div分層各元素位置，主要思路是重疊覆寫
1.1 背景范圍是從哪到哪？背景顏色div在什么位置
背景范圍是從border外邊沿圍成的區域，
思路
如何驗證呢？
可以通過設定邊框半透明來看
程序
代碼如下
<head>
...
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.demo{
box-sizing: border-box;
margin: 12px;
border: 10px solid rgba(255,0,0,1);
padding: 22px;
width: 100px;
height: 100px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="demo">
內容
</div>
</body>
具體代碼可以查看http://js.jirengu.com/vemax/1/edit?html,css,output
通過開發者工具調邊框透明度1到0得到的效果如下
結論
紅色變透明，藍色顯現–》可以得出背景范圍是到border外邊沿圍成的區域結束，證明了background背景顏色在邊框boder的下面
1.2 那文字內容在什么位置呢？
思路
從正面可以看出，內容是遮住了背景顏色，內容在background之上，那內容是不是在邊框之上呢?
可以通過代碼來驗證，
程序
在上面代碼基礎上再在div里加上span元素( <span class=text>內容</span>),再給其設定字體變大的樣式(.text{ font-size: 100px; color: green })，
具體代碼可以查看http://js.jirengu.com/zifot/1/edit?html,css,output
可以看出效果如下
結論
從圖里可以看出內容遮住了邊框–》故內容在邊框之上
1.3 那塊級子元素在什么位置呢？
思路
通過添加塊級子元素，使它和比較物件重疊
程序
還是通過代碼驗證下
<head>
...
<style>
.demo{
background: rgb(120,184,211);
width: 200px;
height: 200px;
border: 15px solid rgba(255,0,0,1);
padding: 10px;
}
.childDiv{
background: white;
height: 50px;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="demo">
我是文字內容
<div class="childDiv"></div>
</div>
</body>
在div里加了塊級子元素childDiv，并設定了其樣式為白色，向上移動了-10px
結論
-
可以看出塊級子元素白色div在父div背景之上–》得出塊級子元素在background之上，
-
有可以看出父div文字內容蓋住了白色div–》可以得出文字內容即行內子元素在塊級子元素之上
1.4 那浮動元素又在什么位置呢？
思路
在父div里添加綠色左浮div，并設定右外邊距為-20px，使其和文字重疊，
程序
代碼如下
<head>
...
<style>
.demo{
background: rgb(120,184,211);
width: 200px;
height: 200px;
border: 15px solid rgba(255,0,0,1);
padding: 10px;
}
.childDiv{
background: white;
height: 50px;
}
.float{
float: left;
background: green;
height: 50px;
width: 50px;
color: red;
margin-right: -20px;
}
</style>
</head>
<body>
<div class="demo">
我是文字內容
<div class="float"></div>
<div class="childDiv"></div>
</div>
</body>
具體代碼可以查看http://js.jirengu.com/zaban/1/edit?html,css,output
效果圖如下
結論
-
可以看出綠色浮動元素蓋住了白色不浮動元素–》得出浮動元素在塊級子元素的上面，
-
可以看出文字蓋住了綠色浮動元素–》得出行內子元素在浮動元素的上面
1.5 綜上所述可以驗證得出此圖:
不管文字是在最外面還是某個元素div里面都是一視同仁的，
二. CSS定位position
了解了div分層后就來了解下CSS定位position吧
CSS入門筆記3寫的布局與定位有什么區別呢？
布局是螢屏平面上的
定位是垂直于螢屏的
了解CSS定位先了解檔案流和盒模型
檔案流和盒模型都可以查看CSS入門筆記2
或者查看標準檔案檔案流(normal_flow) MDN / 盒模型( box model) MDN
position的五個取值
選擇器{
...
position: 五個取值;
}
2.1 static
static是默認，表示當前元素在檔案流中
選擇器{
...
position: static;
}
2.2 relative 相對定位
relative相對定位升起來,但不脫離檔案流
選擇器{
...
position: relative;
}
使用場景：
- 用于做位移(很少用)
具體代碼請查看http://js.jirengu.com/newuc/1/edit?html,css,output
在黑色div視角來看，你綠色div還是在原來的位置，你占的位置不變，只是顯示的地方有點偏移，
-
用于給sbsolute做父元素
-
配合z-index
z-index: auto;默認值，不創建新層疊背景關系
z-index: 0/1/2;
z-index: -1/-2
默認z-index是auto，auto計算出來的值是0，但不能寫0(0可能創建層疊背景關系)，
2.3.absolute絕對定位
會相對祖先元素第一個被定位的元素定位(只要不是staic)，主要和relative相搭配
- 使用場景
- 脫離原來的位置，另起一層，比如對話框的關閉按鈕
具體代碼可以查看http://js.jirengu.com/zizaf/1/edit?html,css,output
- 滑鼠懸浮顯示內容功能
<head>
...
<style>
.container{
border: 1px solid red;
height: 300px;
position: relative;
padding: 20px;
}
button{
position: relative;
}
button span{
position: absolute;
border: 1px solid red;
white-space: nowrap;
/*控制文字內容不準換行*/
bottom: calc(100% + 10px);
/*距離底部100%再加10px*/
left: 50%;
transform: translateX(-50%)
}
/*默認不浮現，懸浮著浮現*/
button span{
display: none;
}
button:hover span{
display: inline-block;
}
</style>
</head>
<body>
<div class="container clearfix">
<div style="height: 100px;"></div>
<button>點擊
<span class=tips>提示內容</span>
</button>
</div>
</body>
具體代碼請查看http://js.jirengu.com/zosof/1/edit?html,css,output
類似效果如下
- 可以配合z-index
某些瀏覽器上如果不寫top/left會位置錯亂
善用left:100%; 用來找位置
善用left:50%;加負margin(或者transform: translateX(50%);…)
2.4 fixd 相對視口定位
視口(viewport)就是這個網頁能給用戶看到的區域
不要把fixd放在一個有transform屬性的里面，會不正交，
手機上盡量不要使用這個屬性,會有很多問題
- 使用場景
- 煩人的廣告
- 回到頂部按鈕
具體代碼請看http://js.jirengu.com/sibulo/1/edit?html,css,output
- 配合z-index
2.5 sticky 粘滯定位
可以做導航欄，兼容性差(兼容性可以在caniuse.com里搜索sticky查看)
類似如下
具體代碼可以查看http://js.jirengu.com/rajeg/1/edit?html,css,output
三 層疊背景關系
也叫做堆疊背景關系
3.1 定位元素位置
定位元素默認在最上面（z-index=0/1/2/…），會以那一層為基準，不停往上，z-index為-1會在背景之下，一直往下，z-index在負也不能超過層疊背景關系，跑到html后面就沒有意義了.
<head>
...
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
.container{
border: 1px solid black;
height: 200px;
background: rgba(52, 235, 232, .5);
/*設定半透明可以看到背景下的relativ2的黑色*/
}
.relative{
height: 50px;
background: red;
position: relative;
margin-top: -10px;
}
.relative2{
height: 50px;
background: black;
position: relative;
top: -20px;
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
我是文字
<div class="relative"></div>
<div class="relative2"></div>
</div>
</body>
具體代碼可以看http://js.jirengu.com/wupop/2/edit?html,css,output
效果圖如下
結論
由圖可以看出紅色relative定位盒子蓋住了文字–》定位元素在最上面
由圖可知container半透明藍色背景蓋住了被z-index: -1;的盒子2的背景，，，–》在最下面
老師畫的有張圖可以很好的說明
3.2 那是不是定位元素都可以取決于z-index大小呢？
不是，要看是否在同一個作用域才可以比較大小，
z-index：9;是否大于z-index：2;呢?
用代碼來驗證
具體代碼可以查看http://js.jirengu.com/dayev/2/edit?html,css,output
結論：
- 藍色2蓋住了紅色9–》a和b2處于同一個小世界(container所帶來的層疊背景關系)，這個小世界里的z-index跟外界無關，處在同一個小世界的z-index才能比較
3.3 哪些屬性可以創建層疊背景關系呢？
上面代碼是在z-index值不為auto的絕對相對定位可以創建層疊背景關系，上面relative里配合z-index也說到了z-index: auto;默認值，不創建新層疊背景關系
有很多情況都可以創建層疊背景關系，有一些不正交屬性也可以創建，需要記憶的有:
-
z-index(position 值為 absolute（絕對定位）或 relative（相對定位）且 z-index 值不為 auto 的元素)
-
flex(flex (flexbox) 容器的子元素，且 z-index 值不為 auto；)
-
opacity(opacity 屬性值小于 1 的元素)
-
transform(屬性值不為 none)
可以搜"層疊背景關系 MDN"可以詳細了解層疊背景關系還有如何創建.
–continue
學習前端從入門到入土，我正在路上，您的每一次觀看，就是對我學習路上最大的鼓勵，一起努力吧！
歡迎留下您寶貴的意見，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/244296.html
標籤：其他