绝对定位
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: #ff0;
/*
绝对定位
将position设置为 absolute则开启元素的绝对定位
绝对定位的特点
1.绝对定位会使元素完全脱离文档流
2.绝对定位会改变元素的性质，行内变块，块宽高被内容撑开
3.开启绝对定位后如果不设置偏移量，元素的位置不会发生变化
4.绝对定位会相对与离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没有开启定位，
则相当于HTML标签进行定位，所以一般情况，我们为一个元素开启了绝对定位，会同时为他的父
元素开启相对定位
绝对定位元素会相对与他的包含块进行定位
包含块
对于绝对定位来说，包含块就是离他最近的开启了定位块的元素
如果没有开启定位的祖先元素，则其包含块是网页中的初始包含块
html就是初始包含块
5.绝对定位会使元素提升一个层级
绝对定位元素水平方向布局的等式
left + margin-left + border-left + padding-left + width + padding-right
+ border-right + margin-right + right =包含块的宽度
此时就有了5个值可以设置为auto
left
right
magin-left
magin-right
width
*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.box3{
width: 300px;
height: 300px;
background-color: #00f;
}
span{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
body>
html>