css學習background-定位-z-index
主要內容:
1.background
2.定位
3.z-index
概要解釋:
1.background-image: url(‘鏈接的圖片地址‘); 默認是橫向平鋪 縱向平普
background-repeat:
repeat:默認
no-repeat:不平鋪
repeat-x:
repeat-y:
background-position:x y;
如果為正值 那麽表示調整圖片的位置
如果為負值 精靈圖切圖
background-attachment:fixed;
不會隨著父盒子的滾動而滾動
background: url(‘‘) no-repeat x y;
2.定位
四種定位:
position
static:靜態定位
relative:
相對定位
作用:
1)微調元素
2)可以做"父相子絕"參考
3)如果當前這個標準流的盒子設置了相對定位,那麽他跟標準流下的盒子是一樣的
參考點:
(1)相對於原來的位置調整位置
記住:
1)不要用相對定位做壓蓋現象,因為相對定位會"留坑" 占著茅房布拉斯
2)設置定位之後,它的層級大於標準流的盒子
3)相對的盒子不脫離標準流
absolute:絕對定位
現象:
1)脫標
2)做壓蓋 層級高
(1)參考點
單獨設置絕對定位: top描述
參考點: 頁面的左上角 (跟瀏覽器的左上角區分)
單獨設置絕對定位: bottom描述
參考點: 瀏覽器的左下角
(2)當有父子盒子嵌套時參考點:
父輩元素設置相對定位 子元素設置絕對定位 那麽子元素是以最近父輩元素(必須設置相對定位)的左上角為參考點來調整位置
絕對定位的盒子居中:
left:50%;
margin-left:負的該盒子寬度的一半
fixed:固定定位
1.脫標
2.層級提高
參考點:瀏覽器的左上角
應用:固定導航欄 廣告 回到頂部
只要盒子 設置浮動了 固定定位 絕對定位了
1.脫標
2.可以任意寬高
3.z-index
前提條件:必須設置定位
1.z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，
2.只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
3.z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麽誰寫在HTML後面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。
4.從父現象：父親慫了，兒子再牛逼也沒用
下面是詳細的解釋:
1 background
下面是背景圖的詳細解釋:
註意工作中通常是用快捷用法:
background: url(‘images/timg.jpg‘) no-repeat 10px 20px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-img</title> <style> *{ padding: 0; margin: 0; } .box{ background-image: url(‘./images/love.jpg‘); width: 100%; height: 150px; background-repeat: no-repeat; background-position: center top; /* 這個包括設置背景圖,以及不多行平鋪,只單行平鋪,以及設置背景圖居中 */ } .container{ width: 300px; height: 400px; background-color: red; background-image: url(‘images/timg.jpg‘); background-repeat: no-repeat; background-position: 10px 20px; /* 這個是設置在div中微調背景圖的位置 */ } .koutu{ width: 20px; height: 30px; /* background-color: green; */ background-image: url("images/timg.jpg"); background-repeat: no-repeat; background-position: 0 -20px; /* 這個是對背景圖進行切割.獲取想要的圖片 */ } </style> </head> <body> <div class = "box"></div> <div class = "container"> </div> <div class = "koutu"></div> </body> </html>
2.定位
1)相對定位
示例如下:
相對定位要註意的是相對的偏移是相對原位置的偏移.
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; } .child1{ background-color: red; } .child2{ background-color: green; position: relative; top: -30px; /* 相對於原位置向上偏移30px */ left: 100px;/* 相對於原位置向右偏移100px */ } .child3{ background-color: blue; } </style> </head> <body> <div class = "child1"></div> <div class = "child2"></div> <div class = "child3"></div> <div class = "child4"></div> </body> </html>
相對偏移的微調數據:
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a{ text-decoration:none; color:#172c45; position: relative; top: -6px; /* 這裏是根據web上設置的微調 */ } input{ font-size: 30px; } </style> </head> <body> <a href="#">百度一下</a> <input type="text"> </body> </html>
相對偏移的重要應用:父相子絕
父相子絕裏的邊界是父親的相對定位.
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .father1{ position: relative; width: 600px; height: 200px; background-color: red; } .father2{ position: relative; width: 400px; height: 100px; background-color: green; } .child1{ width: 50px; height: 50px; background-color: blue; position: absolute; } .child2{ width: 50px; height: 60px; background-color: gray; position: absolute; top: 30px; left: 40px; } </style> </head> <body> <div class = "father1"> <div class = "father2"> <div class = "child1"></div> <div class = "child2"></div> </div> </div> </body> </html>
絕對定位:
絕對定位裏要註意是:
如果沒有父相子絕,那麽也就是單獨用絕對定位,那麽參考點是頁面的左上角(這裏註意和瀏覽器的左上角區別開.)
如果用的是bottom的話,那麽參考點是瀏覽器左下面.
絕對定位還有一點要註意到的是,絕對定位怎麽使自己居中父盒子.需要如下操作:
left:50%;
margin-left:負的該盒子寬度的一半
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; position:absolute; left: 40px; bottom: 10px; background-color: green; /* 註意這裏的bottem設置是相對於瀏覽器的底部距離 */ } .test{ width: 500px; height: 1200px; background-color: red; position: absolute; top: 30px; left: 30px; /* top這裏是相對於頁面左上角來說的,不管你有沒有父標簽,只要父標簽沒有設置父相子絕的話,那麽就是相對於頁面. */ } .body_test{ width: 1000px; height: 1000px; margin: 40px; background-color: gray; } </style> </head> <body> <div class = "body_test"> <div class = "test"></div> <div class = "box"></div> </div> </body> </html>
固定定位:
固定定位要註意的是,一定要有top和left.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } div{ width: 800px; } .box{ background-color: red; height: 800px; } .box1{ background-color: green; height: 50px; position:fixed; top: 30px; left: 20px; width: 50px; } </style> </head> <body> <div class = "box"></div> <div class = "box1"></div> </body> </html>
3.z-index
前提條件必須設置定位,設置定位後所有默認值為0.
前提條件:必須設置定位
1.z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，
2.只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
3.z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麽誰寫在HTML後面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的
4.從父現象：父親慫了，兒子再牛逼也沒用
下面是從父現象的代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father1{ width: 400px; height: 400px; position: relative; background-color: gray; z-index: 1; } .father2{ width: 400px; height: 400px; position: relative; background-color: green; z-index: 2; } .child1{ width: 50px; height: 50px; background-color: red; position: absolute; top: 200px; left: 450px; z-index: 3; } .child2{ width: 50px; height: 50px; background-color: blue; position: absolute; top: -220px; left: 450px; } </style> </head> <body> <div class = "father1"> <div class = "child1"></div> </div> <div class = "father2"> <div class = "child2"> </div> </div> </body> </html>
css學習background-定位-z-index