正确区分relative 和 absolute

来源：互联网发布：linux recovery mode 编辑：程序博客网时间：2024/06/09 14:11

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{ position:relative;width: 100px; height: 100px;background: red;top:20px;}
#div2{position: absolute;width: 300px;height: 300px;background: green;/*left: 20px;*/}
</style>
</head>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
</html>

//小红relativ ，大绿absolute ，（ relative：r ， absolute：a ）
并列情况：
1.小红r，大绿a，r——a，（无任何top，left值：红绿上下排列，不会重叠；大绿设置top，left值：大绿会上移，覆盖小红
根据设置的值来看具体覆盖多少；小红设置top，left值，会移动，在大绿下面；即只要设置top，left值，不论给红还是绿设置
，红的都会在绿的下面）
2.小红r，大绿a，a--r，（无任何top，left值，红色在绿色上面；绿色设置top：绿色上下动，红色不动，还是红色在上面，
红色设置top，红色上下动，绿色不动，红的还是在绿色上面，即只要设置top，left值，不论给红还是绿设置
，红的都会在绿的上面）
3.小红a，大绿r，r——a，(无任何top，left值，绿红上下排列，不会重叠；红色设置top，会上下动，但是会在绿色上面动；
绿色设置top，会上下动，在红色下面动，不论给红还是绿设置，红的都会在绿的上面)
4.小红a，大绿r，a--r，（无任何top，left值，绿色会覆盖红色；给哪个设置top，绿色都在红色上面）
包含情况
1.小红a，大绿r，a包含r，（无任何top，left值，绿色会覆盖红色；给哪个设置top，绿色都在红色上面，top值大于红色
宽度，才会看到两者分开）
2.小红a，大绿r，r包含a，（无任何top，left值，红色在绿色上面；给绿色设置top：红绿会一起移动；给红色设置top：只有
红色动，绿色不动）
3.小红r，大绿a，a包含r,(无任何top，left值，红色在绿色上面；给绿色设置top：红绿会一起移动；给红色设置top：只有
红色动，绿色不动)
4.小红r，大绿a，r包含a,(无任何top，left值，绿色在红色上面；给绿色设置top：绿色会移动，红色不动；给红色设置top：
红色动，绿色不动)

大体总结：

一.两个元素是并列关系：
1.相对定位和绝对定位都是脱离了文档流，相对定位占位置，绝对定位不占位置，
2.如果先加载相对定位的元素，后加载绝对定位元素，那么相对定位元素会占一个位置，前提是他们都不设置top和left值）
3.如果先加载的是绝对定位，后加载的是相对定位，那么两个元素会叠加在一起，而且会叠加到先加载的那个元素上
4.如果两者都是绝对定位，那么他们会叠在一起，后面加载的部位会叠在前面加载的元素上。
5.如果两者都是相对定位，那么他们按后面加载的顺序，上下排列，不会重叠。
二.两个元素是包含关系：
1.里面的元素是绝对定位，只要外面的元素设置了position，无论是relative还是absolute，里面的元素都会相对于
外面的元素移动（改变top，left值）
2两者只要是包含的关系，外面的元素动，里面的元素一定会一起跟着动；里面的元素动的话，可以移动到外面元素的外边，
此时不用考虑这两者的定位类型

阅读全文

0 0