一、绝对定位
1.概念：
相对于已经定位的上层元素（即使用了position）进行定位；若上层元素没有定位，则向更上层寻找已定位元素，直至根元素。（脱离文档流）
2.代码属性：
CSS代码添加
position：absolut水平方向：left、right
垂直方向：top、bottom
3.‼注：
①两个方向各选一个参数即可定位。
②定位的数值可以为负数。
③设置了绝对定位的盒子，都有专属浮层，由几个绝对定位的盒子，就有几个浮层。
4.示例
- ①首先创建一个HTML默认结构
<style>div{width: 100px;height: 100px;background-color: gray;border: 2px red solid;margin: 3px;}#div1{background-color: red;}#div2{background-color: green;}#div3{background-color: blue;}</style>
</head>
<body><div id="div1">红</div><div id="div2">绿</div><div id="div3">蓝</div>
</body>- ②添加带有绝对定位方式的CSS属性
<style>div{width: 100px;height: 100px;background-color: gray;border: 2px red solid;margin: 3px;}#div1{background-color: red;position: absolute;left: 50px;top: 50px;}#div2{background-color: green;}#div3{background-color: blue;}article{width: 600px;height: 600px;background-color: gray;position: absolute;left: 100px;top: 100px;}</style>
</head>
<body><article><div id="div1">红</div><div id="div2">绿</div><div id="div3">蓝</div>
</article>
</body>运行的结果为（由左➡右）
绝对定位的盒子从标准流中脱离，对其后的兄弟盒子定位没有影响，其他盒子就好像整个盒子不存在一样。原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后，生成一个块级框，与原来它在正常流中生成的框无关。
5.练习：
如图：
代码如下：
<style>div{width: 100px;height: 100px;background-color: gray;margin: 3px;}#div1{width: 50px;height: 50px;background-color: white;position: absolute;left: 100px;top: 80px;}#div2{width: 50px;height: 50px;background-color: white;position: absolute;left: 300px;top: 80px;}#div3{width: 50px;height: 50px;background-color: red;position: absolute;left: 200px;top: 160px;}#div4{width: 30px;height: 30px;background-color: green;position: absolute;left: 210px;top: 170px;}article{width: 450px;height: 450px;background-color: gray;position: absolute;left: 500px;top: 100px;}#div5{width: 170px;height: 38px;background-color: white;position: absolute;left: 100px;top: 250px;padding-left: 80px;padding-top: 10px;}</style>
</head>
<body><article><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div><div id="div5">绝对定位练习</div></article>
</body>
