<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {
border: 1px solid red;
width: 100px;
height: 100px;
position: static; /* 默认文档流是static设置 */
}
#div2 {
border: 1px solid blue;
width: 100px;
height: 100px;
position: absolute; /* 脱离html文档流使其自己设置定位 是相对整个页面的定位 */
/* left:300px;
top: 250px; */
/* right: 0px;
bottom: 0px; */
right: 100px;
bottom: 300px;
}
#div3 {
border: 1px solid lime;
width: 100px;
height: 100px;
position:fixed; /* 脱离html文档流使其自己设置定位 是相对整个电脑屏幕进行定位 */
right: 300px;
bottom: 300px;
}
#div4
{
border: 1px solid yellow;
width: 100px;
height: 100px;
position: relative; /* 脱离html文档流使其自己设置定位 是相对原来文档流中的位置进行定位 */
left: 50px;
top: 50px;
}
/* position:inherit 指该元素继承于父元素 */
/* ----------------------------------------------------------------- */
#div5
{
background-color:blue;
width: 100px;
height: 100px;
position:absolute;
left: 100px;
top: 500px;
z-index: 100; /* 设置元素的层级 谁在谁在的上面 */
}
#div6
{
background-color: red;
width: 100px;
height: 100px;
position: absolute;
left: 120px;
top: 520px;
z-index: 99;
}
#div7
{
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
left: 140px;
top: 540px;
z-index: 98;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
换行<br>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
</body>
</html>
