使用五种定位方式实现十字路口

第一种:margin 绝对定位

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>十字路口</title>
 6     <style>
 7        /* html,body{
 8             height: 100px;
 9         }*/
10         #p1{
11             width: 200px;
12             height: 200px;
13             background: #ffa9db;
14             margin-top: 100px;
15             margin-left:100px;
16         }
17         #p2{
18             width: 200px;
19             height: 200px;
20             background: #80c9ff;
21             margin-top: -200px;
22             margin-left:400px;
23         }
24         #p3{
25             width: 200px;
26             height: 200px;
27             background: #73ff5c;
28             margin-top: 100px;
29             margin-left:100px;
30         }
31         #p4{
32             width: 200px;
33             height: 200px;
34             background: #c070ff;
35             margin-top: -200px;
36             margin-left:400px;
37         }
38     </style>
39 </head>
40 <body>
41 <div id="p1">
42 </div>
43 <div id="p2">
44 </div>
45 <div id="p3">
46 </div>
47 <div id="p4">
48 
49 </div>
50 </body>
51 </html>

第二种:固定定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #a{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: fixed;

        }
        #b{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: fixed;
            left:20%;
        }
        #c{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position:fixed;
            top:40%;
        }
        #d{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: fixed;
            top:40%;
            left:20%
        }
    </style>
</head>
<body>
<div id="a">

</div>
<div id="b">

</div>
<div id="c">

</div>
<div id="d">
</div>
</body>
</html>

第三种:float浮动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        #a{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            margin-right:20px;
            margin-top: 20px;
            float:left;
        }
        #b{
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            margin-top: 20px;
            margin-right:20px;
            float:left;
        }
        #c{
            width: 200px;
            height: 200px;
            border: 2px #73ff5c solid;
            margin-top: 20px;
            margin-right:20px;
            background-color: #73ff5c;
            float: left;
            clear: both;
        }
        #d{
            width: 200px;
            height: 200px;
            border: 2px #152427 solid;
            background-color: #152427;
            margin-top: 20px;
            margin-right:20px;
            float:left;
        }
    </style>
</head>
<body>
<div id="a">

</div>
<div id="b">

</div>
<div id="c">

</div>
<div id="d">

</div>
</body>
</html>

第四种:relative相对定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #a{
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            position: relative;
        }
        #b{
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            position: relative;
            left:250px;
            top:-200px;
        }
       #c{
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            position: relative;
            top:-150px;
        }
        #d {
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            position: relative;
            left: 250px;
            top: -350px;
        }
    </style>
</head>
<body>
<div id="a">

</div>
<div id="b">

</div>
<div id="c">

</div>
<div id="d">
</div>
</body>
</html>

第五种:absolute绝对定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ausolute</title>
    <style>
        #a{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: absolute;

        }
        #b{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: absolute;
            left:20%;
        }
        #c{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: absolute;
            top:40%;
        }
        #d{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: absolute;
            top:40%;
            left:20%
        }
    </style>
</head>
<body>
<div id="a">

</div>
<div id="b">

</div>
<div id="c">

</div>
<div id="d">
</div>
</body>
</html>