HTML的普通流
浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。
默认样式前提下，元素在HTML的普通流中会“占用”一个位置，而“占用”位置的大小、位置则是由元素的盒子模型来决定。因此，在后续讲的Position、Float属性是否会使元素脱离这个普通流是一个关键点。
position使用
position的属性值共有四个static、relative、absolute、fixed。
1、static
所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的普通流中。
2、fixed
由于兼容性问题没有被广泛应用；fixed固定为浏览器窗口，,元素脱离普通流，不占据空间。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。例如：固定在窗口中的广告浮动框，无论窗口下拉、拖大拖小广告都在中间位置。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
body {
height: 1000px;
font-size: 12px;
}
#ads {
width: 100px;
height: 100px;
background-color: aquamarine;
/* 文本居中 */
text-align: center;
/* 居中固定显示 */
position: fixed;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id="ads">
广告固定在窗口
</div>
</body>
</html>
3、absolute
绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。 position: absolute的元素会脱离页面中的普通流，不占用原有位置，之后元素相当于没有它一样排版。
absolute 相当于立交桥，上层桥不占用位置，下层桥可在在下边，脱离原来自己位置，每一个都是新的层次。例如：div1 absolute不占用位置，div2排版的时候认为div1不存在从头开始排版。图一
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
body {
height: 1000px;
font-size: 12px;
}
#div1{
width: 100px;
height: 100px;
background-color:aqua;
position: absolute;
}
#div2{
width: 200px;
height: 200px;
background-color:gray;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</body>
</html>
应用了position: absolute之后，可能会覆盖其他非定位元素（即position为static的元素），如果不想覆盖到其他元素，可以通过设置z-index的大小来决定层次，越大优先级越高。 例如：让图1的div2显示在上边，通过设置div1的z-index:-1（放置在最下层）即可，z-index只有在position: absolute/relative时才生效。图二
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
body {
height: 1000px;
font-size: 12px;
}
#div1 {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
z-index: -1;
}
#div2 {
width: 200px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</body>
</html>
4、relative
相对定位。每个元素在页面的普通流中会有“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移。
relative vs absolute
A 、relative普通流中占用一个位置，不脱离普通流；absolute不占用位置，脱离了普通流
absolute不占用位置脱离了普通流
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
body {
height: 1000px;
font-size: 12px;
}
#div1 {
width: 100px;
height: 100px;
background-color: aqua;
/* 相对文档定位，普通流中会有“占用”一个位置 */
/* position: relative; */
/* 绝对定位元素会脱离页面中的普通流，不占用原有位置，之后元素相当于没有它一样排版。*/
position: absolute;
left: 50%;
}
#div2 {
width: 200px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</body>
</html>relative占用位置
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
body {
height: 1000px;
font-size: 12px;
}
#div1 {
width: 100px;
height: 100px;
background-color: aqua;
/* 相对文档定位，普通流中会有“占用”一个位置 */
position: relative;
/* 绝对定位元素会脱离页面中的普通流，不占用原有位置，之后元素相当于没有它一样排版。
position: absolute; */
left: 50%;
}
#div2 {
width: 200px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</body>
</html>B、absolut相对于最近的有定位的父级进行定位，如果没有相对于文档进行定位
relative相对自己原来的位置定位
C、relative做参考物，absolute做定位 例如：设置div1为参照物（设置relative），div2以div1为参照做具体的定位（设置absolute）
图一
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
/* absolute relative 定位差异 */
body {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background-color: sandybrown;
/* 设置定位为相对定位 */
position: relative;
/* 设置左边移动10px right:-10px */
left: 10px;
top: 10px;
}
#div2 {
width: 100px;
height: 100px;
background-color: red;
/* 设置定位为绝对定位，相对于有定位的父元素定位，本例中，以div1为参照进行定位 */
position: absolute;
/* 设置左边移动100px right:-100px */
left: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
div2
</div>
div1
</div>
</body>
</html>
2216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
