一、postion定位
<div id="father">
<div class="box1">第一個盒子</div>
<div class="box2">第二個盒子</div>
<div class="box3">第三個盒子</div>
</div>
1.postion相關(guān)屬性值
1.1 static屬性值
-
HTML 元素的默認(rèn)值，即沒有定位，遵循正常的文檔流對象。靜態(tài)定位的元素不會受到 top, bottom, left, right影響。
默認(rèn)遵循正常文檔流
1.2 relative屬性值
相對定位：相對自身原來的位置進(jìn)行偏移
偏移設(shè)置：top、left、bottom、right-
left和top正、負(fù)取值的方向
取值方向 -
示例：將第一個盒子相對自己原來的位置進(jìn)行移動
.box1{ position: relative; left: 10px; top: 10px; }
- 相對定位元素的規(guī)律
（1）設(shè)置相對定位的盒子會相對它原來的位置，通過指定偏移，到達(dá)新的位置
（2）設(shè)置相對定位的盒子仍在標(biāo)準(zhǔn)文檔流中，它對父級盒子和相鄰的盒子都沒有任何影響
（3）設(shè)置相對定位的盒子原來的位置會被保留下來
1.3 absolute屬性值
偏移設(shè)置： left、right、top、bottom .
-
絕對定位不設(shè)置偏移量
設(shè)置了絕對定位但沒有設(shè)置偏移量的元素將保持在原來的位置。
在網(wǎng)頁制作中可以用于需要使某個元素脫離標(biāo)準(zhǔn)流，而仍然希望它保持在原來的位置的情況
不設(shè)置向上的偏移量，盒子仍然位于原來的位置 -
absolute 注意的幾個點
示例：將第二個盒子用絕對定位進(jìn)行布局
（1）使用了絕對定位的元素以它最近的一個“已經(jīng)定位”的“祖先元素” 為基準(zhǔn)進(jìn)行偏移，例下：#father{ border: 1px solid black; width: 500px; margin: 0 auto; position: relative; /*設(shè)置父類元素相對定位*/ } /**/ .box2{ position: absolute; left: 100px; top: 40px; }
（2）如果沒有已經(jīng)定位的祖先元素，會以瀏覽器窗口為基準(zhǔn)進(jìn)行定位，例下：
（3）絕對定位的元素從標(biāo)準(zhǔn)文檔流中脫離，這意味著它們對其他元素的定位不會造成影響，例下
當(dāng)二個盒子進(jìn)行絕對定位操作時，其他兩個盒子的定位并不會時候到影響
（4）元素位置發(fā)生偏移后，它原來的位置不會被保留下來
1.4 fixed屬性值
- fixed為固定定位
- 偏移設(shè)置： left、right、top、bottom
- 類似絕對定位，不過區(qū)別在于定位的基準(zhǔn)不是祖先元素，而是瀏覽器窗口
相當(dāng)于固定在瀏覽器窗口的位置，在瀏覽器上下滾動時，不會對元素造成影響
1.5 sticky屬性值
- stucky為粘性定位
- 它會產(chǎn)生動態(tài)效果，很像relative和fixed的結(jié)合：一些時候是relative定位（定位基點是自身默認(rèn)位置），另一些時候自動變成fixed定位（定位基點是視口）
2.定位小結(jié)
-
注意：相對定位限制絕對定位
意思是當(dāng)父類設(shè)置相對定位時，子類設(shè)置絕對定位，子類的變化只是會在父類容器里面去變化，父類隨意移動，子類也會隨父類一起移動變化
2.1 相對定位
- 特性
（1）相對于自己的初始位置來定位
（2）元素位置發(fā)生偏移后，它原來的位置會被保留下來
（3）層級提高，可以把標(biāo)準(zhǔn)文檔流中的元素及浮動元素蓋在下邊 - 使用場景
相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創(chuàng)造定位父級而又不設(shè)置偏移量
2.2 絕對定位
- 特性
（1）絕對定位是相對于它的定位父級的位置來定位，如果沒有設(shè)置定位父級，則相對瀏覽器窗口來定位
（2）元素位置發(fā)生偏移后，原來的位置不會被保留
（3）層級提高，可以把標(biāo)準(zhǔn)文檔流中的元素及浮動元素蓋在下邊
（4）設(shè)置絕對定位的元素脫離文檔流 - 使用場景
一般情況下，絕對定位用在下拉菜單、焦點圖輪播、彈出數(shù)字氣泡、特別花邊等場景
2.3 固定定位
- 特性
（1）相對瀏覽器窗口來定位
（2）偏移量不會隨滾動條的移動而移動 - 使用場景
一般在網(wǎng)頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標(biāo)、吸頂導(dǎo)航欄等
二、z-index屬性
1.z-index屬性概念
z-index 屬性指定一個元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
- z-index屬性值：整數(shù)，默認(rèn)值為0
- 設(shè)置了position屬性時，z-index屬性值可以設(shè)置各元素之間的重疊高低。
- z-index值大的位于值小的層上方。
2.示例
-
html代碼
<div> <img src="./day1/練習(xí)4：flex布局練習(xí)/image/book.jpg" alt="圖書" class="img"/> <h1 class="text">書名：創(chuàng)新公司</h1> </div> -
css代碼1:
<style> .text{ left: 0; top: 0; position: absolute; z-index: 1; } .img{ height: 200px; } </style>
當(dāng).text的z-index的值設(shè)為1時，文字在圖片上方
-
css代碼2
<style> .text{ left: 0; top: 0; position: absolute; /* z-index: 1; */ z-index: -1; } .img{ height: 200px; } </style>
當(dāng).text的z-index的值設(shè)為-1時，文字在圖片下方
三、網(wǎng)頁元素透明度
1.opacity屬性
值：從0到1（完全透明到不透明），值越小越透明
對背景和文字都能進(jìn)行透明化
-
html代碼
<body> <div class="div1">元素1</div> <div class="div2">元素2</div> </body> -
css代碼
<style> .div1{ height: 200px; width: 200px; background-color: red; /* opacity: 0.5; */ color: black; } .div2{ height: 200px; width: 200px; margin-top: 50px; background-color: red; opacity: 0.5; color: black; } </style> -
呈現(xiàn)效果
opacity透明度
2.rgba屬性
值：從0到1（完全透明到不透明），且值位于rgba第四位。
例如：rgba（145，232，178，0.5）
只是對背景顏色進(jìn)行透明化，對文字無效果
-
css代碼
<style> .div1{ height: 200px; width: 200px; background: rgba(255, 0, 0, 0.5); color: black; } .div2{ height: 200px; width: 200px; margin-top: 50px; background: rgb(255, 0, 0, 1); color: black; } </style> -
呈現(xiàn)效果
rgba透明度
3.Filter屬性
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
-
例如，代碼
.img{ filter: opacity(50%); }
4.opacity和rgba以及filter的區(qū)別
- 有opacity屬性的所有后代元素都會繼承 opacity 屬性，設(shè)置了該屬性的元素的所有后代子代都會被透明化
- rhba后代元素不會繼承透明屬性，一般只是作用于背景
- filter一般屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)，一般制作用于圖片
