<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>absolute relative</title>
<style>
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
.absolute50{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid red;
margin-left: -50px;
margin-top: -50px;
}
.relative50{
width: 300px;
height: 300px;
position: relative;
top: 50%;
left: 50%;
border: 2px solid red;
margin-left: -150px;
margin-top: -150px;
color: violet;
}
</style>
</head>
<body>
<div class="absolute50">
absolute 50%
</div>
<!-- <div id="otherelement" style="width: 400px; height: 400px; background: red;">
其他文档流元素
</div> -->
<div class="relative50">
relative50
有时候 absolute 和 relative体现的样式一致，有时候不一致，主要原因是，使用relative的时候，有没有其他的元素，如果只有唯一一个，那么就一直，如果还有其他的元素，就不一致
例如，如果没有 otherelement这个div，责absolute50%与relative50%是一致，的有了就不一致了
</div>
</body>
</html>