示例代码1:
<!DOCTYPE html>
<html>
<head>
<title>绝对布局和相对布局探索</title>
<style type="text/css">
body{
background-color: blue;
}
.super{
width: 800px;
height: 800px;
left:300px;
background-color: yellow;
}
.sub{
left: 100px;
top: 150px;
background-color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="super">我是父元素
<div class="sub">我是子元素</div>
<div class="sub">我是子元素</div>
</div>
</body>
</html>
父元素和子元素都没有positin属性：按照文档流的格式，从上到下，从左到右。这时，我们会有个疑问：super的left属性和sub的left、top属性貌似没有表现出来啊？为什么？事实上，现在，我们把它们注释掉，显示效果丝毫没有什么影响。
显示效果如下：
屏幕快照 2017-11-23 下午4.15.30.png
示例代码2:
<body>
<div class="super">我是父元素</div>
<div class="sub">我是子元素</div>
<div class="sub">我是子元素</div>
</body>
屏幕快照 2017-11-23 下午4.18.40.png
示例代码3:
<!DOCTYPE html>
<html>
<head>
<title>绝对布局和相对布局探索</title>
<style type="text/css">
body{
background-color: blue;
}
.super{
width: 800px;
height: 200px;
left:300px;
background-color: yellow;
position: absolute;
}
.sub{
left: 100px;
top: 150px;
background-color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="super">我是父元素
<div class="sub">我是子元素</div>
<div class="sub">我是子元素</div>
</div>
</body>
</html>
效果如下入：很明显，子元素随着父元素跑。为什么？position: absolute只作用于当前元素，它把当前元素从文档流中脱离出来，所以left:300px生效。而作为子元素的sub，并没有从文档流中脱离出来，因为没有position: absolute元素，所以sub的属性left、top无效，sub依然在正常文档流中显示，只不过其父元素是super。
屏幕快照 2017-11-23 下午4.23.14.png
示例代码4:
<!DOCTYPE html>
<html>
<head>
<title>绝对布局和相对布局探索</title>
<style type="text/css">
body{
background-color: blue;
}
.super{
width: 800px;
height: 200px;
left:300px;
background-color: yellow;
position: absolute;
}
.sub{
left: 100px;
top: 150px;
background-color: green;
width: 200px;
height: 200px;
position: absolute;
}
</style>
</head>
<body>
<div class="super">我是父元素
<div class="sub">我是子元素</div>
</div>
</body>
</html>
结果如下，指定了position: absolute的子元素sub脱离了文档流，此时的参考元素是它的父元素，所以left: 100px;top: 150px;生效：
屏幕快照 2017-11-23 下午4.25.52.png
对比代码4，来看代码5:
很明显，super还是在文档流的，因为子元素脱离了文档流，所以left: 100px;top: 150px;属性都是生效的，此时的参考元素是仍然在文档流中的父元素super。
<!DOCTYPE html>
<html>
<head>
<title>绝对布局和相对布局探索</title>
<style type="text/css">
body{
background-color: blue;
}
.super{
width: 800px;
height: 200px;
left:300px;
background-color: yellow;
}
.sub{
left: 100px;
top: 150px;
background-color: green;
width: 200px;
height: 200px;
position: absolute;
}
</style>
</head>
<body>
<div class="super">我是父元素
<div class="sub">我是子元素</div>
</div>
</body>
</html>
屏幕快照 2017-11-23 下午4.28.35.png
综上所述：
1、对于没有position属性的元素来说，因为没有脱离文档流，布局就按照从上到下，从左到右的顺序进行。其参考的父元素就是当前父元素，如果没有，就是body元素。
2、注意:absolute将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其中最接近的一个具有定位属性的父定位包含框进行绝对定位。如果不存在这样的定位包含框，则相对于浏览器窗口。换句话说，如果定义了包含元素为定位包含框以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。
其实，position:relative也是一样的道理。
<!DOCTYPE html>
<html>
<head>
<title>绝对布局和相对布局探索</title>
<style type="text/css">
body{
background-color: blue;
}
.super{
width: 800px;
height: 800px;
left:300px;
background-color: yellow;
position: relative;
}
.sub1{
left: 100px;
top: 150px;
background-color: green;
width: 300px;
height: 300px;
}
.sub2{
left: 100px;
top: 100px;
background-color: red;
width: 200px;
height: 200px;
/* position: relative;*/
}
</style>
</head>
<body>
<div class="super">
<div class="sub1">
<div class="sub2"></div>
</div>
</div>
</body>
</html>
屏幕快照 2018-01-13 下午3.07.13.png
上图，sub1元素依然在文档流中，相对于父元素定位，sub2由于没有position: relative属性，left、top属性为0。
如果添加sub2的position: relative属性，效果如下图：
屏幕快照 2018-01-13 下午3.11.38.png
left、top属性生效，相对于自己原来在文档流的位置偏移了各100。
position:relative 遵循的是流动布局模型，存在于正常的文档流中，但是它的位置可以根据原位置进行偏移。由于相对定位元素占有自己的空间，即原始位置保留不变，因此它不会挤占其他元素的位置，但可以覆盖在其他元素之上进行显示。
与相对定位元素不同，绝对定位元素完全被拖离正常文档流中原来的空间，且原来空间将不再被保留，被相邻元素挤占。把绝对定位元素设置在可视区域之外会导致浏览期窗口的滚动条出现。而设置相对定位元素在可视区域之外，滚动条是不会出现的。
网友评论