标准流:设想一层界面
摆脱标准流:设想二层界面(二层界面特点为并行)
position : [absolute:relative:fixed]
absolute:绝对定位,脱离标准流后,设想进入二层界面进行编辑
relative:相对定位,若脱离标准流后,上级别有二层界面存在,但不并行,且相对定位仍是块元素
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1 {
background-color: aliceblue;
width: 400px;
height: 400px;
margin-top: 100px;
margin-left: 100px;
position: relative;
}
#div2 {
background-color: red;
width: 250px;
height: 250px;
position: absolute;
top: 50px;
left: 50px;
}
#div3 {
background-color: orange;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
fixed:绝对于窗口界面(小广告)
特地补充: overflow:hidden ;可以用于解决界面崩塌(会有计算浮动块长度来解决div的不显示问题)