之前的文章里提到了两种常见的网页布局方式------标准流和浮动。标准流的特点是块级元素独占一行，多个块级元素呈垂直分布，而行内元素和行内块元素可在一行显示多个，呈水平排布；浮动的特点是可以让块级元素水平排列，但不会遮盖文字。除此之外还有一种非常重要的布局方式，那就是定位。它除了能够把元素摆在网页的任意位置，还能够解决元素之间的重叠问题，使得某个元素能够“压”在另一个元素上面。
为了能够满足日常使用，定位被分成了四种不同的类型------静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed），分别作为属性值接在属性名position之后。设置好定位方式之后，还需要分别在水平方向和垂直方向设置方位属性，即偏移值。
需要注意的是，一般来说我们只需要在水平和垂直方向上写一个属性即可，若是在水平或竖直方向上同时写两个属性，比如同时写left和right或者top和bottom，则以left和top的值为准。
1.静态定位
静态定位即标准流，代码写作 position:static; ，无法通过方位属性移动元素。
如下列代码所示，即使使用了left、top属性，粉色的div元素也无法脱离原来的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
.box {
/* 静态定位, 默认值, 标准流 */
position: static;
left: 100px;
top: 200px;
width: 200px;
height: 200px;
background-color: pink;
}
.box1{
width: 100px;
height: 100px;
background-color: yellow;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box">box</div>
<div class="box2"></div>
</body>
</html>2.相对定位
相对定位的“相对”是相对于自己原来的位置来说的，而且在移动的过程中，只是视觉上的位置变化，元素本身并未脱离标准流。
如下列代码所示，变化后的div元素距离原来位置的左边100px，距离原来位置的上边200px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
left: 100px;
top: 200px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<div class="box">box</div>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>3.绝对定位
绝对定位的代码是 position:absolute; ，它是一个既“自由”又“不完全自由”的定位 。“自由”是体现在它会使元素脱离标准流，布局起来更加灵活方便，“不完全自由”体现在它总是相对于某一个元素进行移动，并非“脱缰的野马”。因此，它有以下特点：
（1）在页面中不占据位置，即脱离标准流。
（2）需要配合方位属性 left/rght、top/bottom 进行移动。
（3）默认相对于html标签进行移动。
（4）移动的时候是将元素占据的整个区域进行移动，包括内容尺寸、内边距、边框厚度、外边距。
针对以上四个特点，我们用代码分别进行解释。
对于第一个特点，下列代码可以很好的说明定位不同于浮动，它是完全脱离标准流的，即便是兄弟元素里的内容，它也能遮住。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;
padding: 0;}
.box1{
width: 500px;
height: 500px;
background-color: red;
}
.box2{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">1234567890</div>
<div class="box2"></div>
</body>
</html>对于第二点和第三点可以放在一起说， 对于box2来说它的默认参考系是浏览器可视区域的四周，具体来说就是最左边、最右边、最上边和最下边，无论它的父元素怎么设置宽高内外间距，都不会影响到子盒子的定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;
padding: 0;}
.box1{
margin: 200px;
width: 500px;
height: 500px;
background-color: red;
}
.box2{
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
1234567890
<div class="box2"></div>
</div>
</body>
</html>对于第四点，用一个实际的例子就很好理解了。
box2在移动的过程中，拿水平方向来说，box2自身的内容尺寸是100px*100px，边框的宽度是50px，外边距是100px，那么box2所占据的水平宽度为100+50*2+100*2=400px，同理，垂直宽度也为400px，再加上 left:100px; 和 top:100px; ，box2就会正好卡在box1的边缘，也就是下图所示位置，这也进一步说明了在移动的过程中，是将所占据的区域进行移动的，而不仅仅是能看见的区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;
padding: 0;}
.box1{
width: 500px;
height: 500px;
background-color: red;
}
.box2{
position: absolute;
left: 100px;
top: 100px;
margin: 100px;
border:50px solid black;
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
1234567890
<div class="box2"></div>
</div>
</body>
</html>4.参考系元素
在第三点中提到过，如果不做任何措施的情况下（总感觉这句话有点怪怪的），绝对定位的元素是相对于浏览器可视区域进行移动的。
那除了浏览器可视区域外，能不能用别的元素来作为移动时的参考系呢？答案是当然能用别的元素作为参考系，只需要把别的元素也设置成某种定位就行。不过还有一些更加具体的要求需要我们注意：
（1）被当做相对参考系的元素只能用absolute、relative、fixed作为定位，不能用static。
（2）某个元素移动时的相对参考系只能是父级或者更高级别的元素，不能是兄弟元素。
（3）绝对定位查找父级是遵循“就近原则”，即就近找定位的父级, 如果逐层查找不到这样的父级， 就以浏览器窗口为参照进行定位。
5.固定定位
我们经常能看到网页上某些组件即便是在滑动页面的过程中也能始终停留在某个位置，比如说下图中顶部的编辑栏，无论我怎么滑动页面，它始终固定在页面的顶部位置，这就需要固定定位----fixed 来实现。
固定定位有三个特点：
（1）在页面中脱离标准流，不占据位置。
（2）需要配合方位属性实现移动。
（3）相对于浏览器可视区域进行移动。
总的来说，它和绝对定位的差别并不是很大，只是相对移动时的参考系不一样罢了。
6.元素的层级关系
目前一共接触到了三种布局方式，分别是标准流布局、浮动布局和定位布局，他们的层级关系是标准流 < 浮动 < 定位，层级高越的元素越靠上，并且会把层级低的元素“压”在下面。 在不同的定位模式中，相对、绝对、固定默认层级相同，此时HTML中写在下面的元素层级更高，会覆盖上面的元素。在定位等级相同的情况下，如果想要将HTML中上面的元素覆盖下面的元素，可以使用z-index属性（z-index:数字;）,z-index的属性值越大，表示层级越高。
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
