1 、绝对定位脱标
（1）绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了
（2）两个或多个绝对定位的元素，“标签”靠后写的标签，它的层的叠放顺序靠上。 （注意：和样式谁在上面写，谁在下面写，没有关系！）
绝对定位脱标代码如下：
<title>绝对定位</title>
<style>
.pp{
width: 300px;
height: 200px;
background-color: pink;
/* 绝对定位（脱标） */
position: absolute;
/* 定位置（坐标点） */
/* 右下 */
left: 200px;
top: 200px;
/* 层的叠放顺序 */
z-index: 0;
}
.bb{
width: 400px;
height: 300px;
background-color: coral;
/* 绝对定位 */
position: absolute;
/* 定位置 */
/* 右下 */
left: 400px;
top: 300px;
/* 层的叠放顺序 */
z-index: 0;
}
</style>
</head>
<body>
<!-- 如果z-index为默认的，那么谁的标签写在下面，谁就 盖住谁
如果给z-index设置值时，谁的值大，谁就盖着谁-->
<span class="pp"></span>
<a href="" class="bb"></a>
<!-- 解决哪个盒子盖着哪个盒子，盒子在上面的方法 -->
<!-- 方法一： <a href="" class="bb"></a>
<span class="pp"></span> -->
<!-- 方法二: z-index：2 ； -->
预览：
2、绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。
<title>绝对定位的盒子居中</title>
<style>
*{
margin: 0;
padding: 0;
}
.banner{
width: 100%;
height: 450px;
background-color: #BDBDC0;
margin-top: 200px;
/* 父相 */
position: relative;
}
.login{
width: 460px;
height: 360px;
background-color: #f1f1f1;
/* 子绝 */
position: absolute;
left: 50%;
top: 50%;
/* 向左移动，水平居中，要向左移动宽度的一半 */
margin-left: -230px;
/* 向上移动，垂直居中，要向上移动高度的一半 */
margin-top: -180px;
}
</style>
</head>
<body>
<div class="banner">
<!-- 水平居中，垂直居中 -->
<div class="login">
</div>
</div>
预览：
版权声明：本文为weixin_72303943原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。