z-index的使用
一.如何让一个绝对定位的盒子居中
left : 50%;
margin-left : 宽的一半
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- <link rel="stylesheet" href="header.css"> <link rel="stylesheet" href="content.css"> --> <!-- <link rel="stylesheet" href="main.css"> --> <style> *{ padding: 0; margin: 0; } body{ font-size: 14px; } ul{ list-style: none; } a{ text-decoration: none; } input{ border: 0; outline: 0; } .father{ width: 100%; height: 200px; background-color: red; position: relative; } .box{ width: 400px; height: 100px; background-color: green; position: absolute; /**/ left: 50%; margin-left: -200px; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> </body> </html>
二.固定定位
position : fixed;
特性:
1.脱标 2.遮盖,提升层级 3.固定不变
参考点:
设置固定定位,用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述,那么是以浏览器的左下角为参考点
作用: 1.返回顶部栏 2.固定导航栏 3.小广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } body{ padding-top: 80px; } .header{ width: 100%; height: 80px; background-color: red; /*脱离了标准文档流*/ /*参考点:是以浏览器的左上角*/ position: fixed; top:0; left: 0; z-index: 10000; } .active{ position: relative; } </style> </head> <body> <div class="header"></div> <p>alex1</p> <p>alex2</p> <p>alex3</p> <p>alex4</p> <p>alex5</p> <p>alex6</p> <p>alex7</p> <p>alex8</p> <p>alex</p> <p>alex</p> </body> </html>
三.z-index的使用
特性:
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> *{ padding: 0; margin: 0; } .father1{ width: 300px; height: 300px; background-color: red; position:relative; z-index: 3; } .child1{ width: 100px; height: 100px; background-color: purple; position: absolute; top: 280px; left: 350px; z-index: 20; } .father2{ width: 300px; height: 300px; background-color: green; position:relative; z-index: 2; } .child2{ width: 100px; height: 100px; background-color: yellow; position: absolute; top: 0; left: 350px; z-index: 21; } </style> </head> <body> <div class="father1"> <div class="child1"></div> </div> <div class="father2"> <div class="child2"></div> </div> </body> </html