实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.用绝对定位实现十字架</title>
<style type="text/css">
.box {
width: 600px;
height: 600px;
background-color: lightyellow;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background-color: lightskyblue;
/*绝对定位*/
position: absolute;
top: 0;
left: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color: lightgreen;
/*绝对定位*/
position: absolute;
top: 400px;
left: 200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: lightcoral;
/*绝对定位*/
position: absolute;
top: 200px;
left: 0px;
}
.box4 {
width: 200px;
height: 200px;
background-color: brown;
/*绝对定位*/
position: absolute;
top: 200px;
left: 400px;
}
</style>
</head>
<body><!--
定位：
四种模式：static,relative,absolute,fixed;
四个位置：left,right,top,bottom;
绝对定位：元素绝对于她原来在文档流中的位置进行定位 -->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
