正文
【CSS3】定位
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"><img src="img/草1.jpg"></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><br><br><br><br><br><br>
<div id="div9">
文字
<input type="text" name="">
<img src="img/鸟1.jpg">
<p id="p1">哈哈</p>
<div id="div10"></div>
</div>
<br><br><br><br><br><br><br>
<div id="div11"></div>
<div id="div12"></div>
<div id="div13"></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>
<p>让窗口滚动起来</p>
</body>
</body>
</html>
#div1{
width: 100px;
height: 100px;
background: red;
/*position: relative;*//*相对定位对象会占据原来位置*/
position: absolute;/*绝对定位对象可以层叠。absolute相对与父元素body来定位*/
left: 100px;
}
#div2{
width: 100px;
height: 100px;
background: green;
/*position: relative;*//*相对定位和绝对定位都需要结合left、right、top、bottom使用*/
position: absolute;
right: 50px;
}
#div3{
width: 100px;
height: 100px;
background: blue;
/*position: relative;*/
position: absolute;
top: 50px;
}
#div4{
width: 100px;
height: 100px;
background: pink;
/*position: relative;*/
/*position: absolute;*/
/*position: fixed;*//*滚动窗口时fixed定位的内容不会被滚动，相对于窗口来定位。*/
/*position: static;*//*默认值，没有定位*/
/*bottom: 10px;*/
}
#div5{
width: 200px;
height:200px;
background: rgba(255,0,0,0.5);
position: relative;
left: 200px;
z-index:;
}
#div6{
width: 200px;
height:200px;
background: rgba(0,255,0,0.5);
position: relative;
left: 300px;
top: -100px;
z-index:;
}
#div7{
width: 200px;
height:200px;
background: rgba(0,0,255,0.5);
position: relative;
left: 400px;
top: -200px;
z-index:;/*1在最底层*/
}
#div8>img{
/*position: fixed;*/
clip: rect(10px,160px,160px,10px);/*只有在position为absolute或fixed时才会起作用，在position为relative或static时无效。*/
}
#div9{
width: 100%;
height: 500px;
background: rgba(100,100,100,0.3);
}
#p1{
display: inline-block;
vertical-align: 20px;
}
#div10{
width: 100px;
height: 100px;
background: pink;
display: inline-block;
vertical-align: text-top;/*可设text-bottom、sub、super*/
}
input{
vertical-align: top;/*可设baseline默认、top、middle、bottom、像素、百分比*/
}
#div11{
width: 200px;
height: 200px;
background: red;
float: left;
}
#div12{
width: 200px;
height: 200px;
background: green;
float: left;
}
#div13{
width: 200px;
height: 200px;
background: blue;
clear: left;/*清除浮动clear:both、left、right、none*/
}
