* {
margin: 0;
padding: 0;
}
.static-test {
width: 100px;
height: 60px;
border: 1px solid red;
display: inline-block;
left: 20px;
top:10px;
z-index: 2;
}
<body> <div class="static-test"></div> </body>
* { margin: 0; padding: 0; } body { border: 1px solid black;
font-size: 0;/*清除行内块元素之间默认间距*/
}
div {
width: 100px;
height: 60px;
display: inline-block;
}
.relative-test-first {
background-color: red;
position: relative;
top: 10px;
left: 30px;
z-index: -1;
}
.relative-test-second {
background-color: blue;
}
<body> <div class="relative-test-first"></div> <div class="relative-test-second"></div> </body>
* { margin: 0; padding: 0; } body { border: 1px solid black;
font-size: 0;/*清除行内块元素之间默认间距*/
}
body>div {
width: 100px;
height: 60px;
display: inline-block;
}
.relative-test-first {
background-color: red;
position: relative;
margin-left: 30px;
}
.relative-test-second {
background-color: blue;
}
<body> <div class="relative-test-first"></div> <div class="relative-test-second"></div> </body>
html {
border: 1px solid blue;
}
body {
border: 1px solid red;
}
div {
width: 100px;
height: 60px;
display: inline-block;
}
.relative-test {
position: relative;
background-color: red;
top: 10px;
left: 30px;
}
.absolute-test {
position: absolute;
background-color: blue;
top: 10px;
left: 30px;
}
<body> <div class="relative-test"></div> <div class="absolute-test"></div> </body>
原文：https://www.cnblogs.com/fengyouqi/p/10967891.html