二十二，相对与绝对定位
2020-12-24 本文已影响0人
好多可乐
一，在不设置定位（也就是默认定位 static 的情况下，对块级元素设置top/left等属性，无效。
二，使用绝对定位还是相对定位的一个判断依据就是文档流是否需要被破坏：绝对定位会破坏文档流——产生浮动效果
如底下代码，本来是想实现3个方块竖排紧贴在一起，实际效果：第二个覆盖第一个，第三个覆盖第二个，最终显示的只是第三个方块
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.test1{
background-color: red;
position: absolute;
top: 10px;
left: 100px;
}
.test2{
background-color: green;
position: absolute;
top: 10px;
left: 100px;
}
.test3{
background-color: blue;
position: absolute;
top: 10px;
left: 100px;
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
</body>
</html>
在这里插入图片描述
在这里插入图片描述
三， 作为父容器时，是使用相对定位还是绝对定位：
当父一级div中只有一组子元素的时候，使用relative(相对定位)或absolute(绝对定位)都可以达到移动效果。
但当父容器中还有其他组的子元素时，就要考虑是否破快文档流（是否使用absolute进行页面布局）
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main{
position: relative;
left: 100px;
height: 350px;
}
div{
width: 100px;
height: 100px;
}
.test1{
background-color: red;
}
.test2{
background-color: green;
}
.test3{
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
</div>
作为父容器时，是使用相对定位还是绝对定位：
当父一级div中只有一组子元素的时候，使用relative(相对定位)或absolute(绝对定位)都可以达到移动效果。
但当父容器中还有其他组的子元素时，就要考虑是否破快文档流（是否使用absolute进行页面布局）
</body>
</html>
