一.如何让一个绝对定位的盒子居中
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