一、定位布局 是什么？
使用 position、left、right、top、bottom，可以改变元素现有位置，譬如让元素从正常布局流中跳出来，固定在页面某个位置上。
二、使用场景
1、position: static
这是元素的默认值，表示按照正常布局流进行排列元素（浏览器默认展示方式）。此时 top, right, bottom, left 和 z-index 属性无效。
2、position: relative
以现有位置为坐标进行偏移，元素不会被移出正常文档流，原有区域会留下空白。新建文件 index.html 并复制下面到文件，用浏览器打开 index.html 看效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Relative positioning</title>
<style>
body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
/* static 等同于正常布局流排列方式 */
position: relative;
background: yellow;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<h1>Relative positioning</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">By default we span 100% of the width of our parent element, and our are as tall as our child
content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
will do: <img src="long.jpg"></p>
</body>
</html>
3、position: absolute
根据最近非 static 祖先元素进行偏移，元素会被移出正常文档流，但不会有空白。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。新建文件 index.html 并复制下面到文件，用浏览器打开 index.html 看效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Absolute positioning</title>
<style>
body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
/* static 等同于正常布局流排列方式 */
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<h1>Absolute positioning</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">By default we span 100% of the width of our parent element, and our are as tall as our child
content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
will do: <img src="long.jpg"></p>
</body>
</html>
4、position: fixed
用页面作为坐标来偏移，元素会被移出正常文档流，但不会有空白。页面滚动时元素的位置不会改变。导航菜单就可以用 fixed 来定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed positioning</title>
<style>
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin-top: 0;
background: white;
padding: 10px;
}
p:nth-of-type(1) {
margin-top: 60px;
}
</style>
</head>
<body>
<h1>Fixed positioning</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">Now I'm absolutely positioned relative to the <code><body></code> element, not the
<code><html></code> element!</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins,
not both.</p>
</body>
</html>
5、position: sticky
根据最近滚动祖先进行偏移，元素不会被移出正常文档流，不会影响其他元素。元素可以正常移动，但是到指定位置后固定起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sticky positioning</title>
<style>
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
dt {
background-color: black;
color: white;
padding: 10px;
position: sticky;
top: 0;
left: 0;
margin: 1em 0;
}
</style>
</head>
<body>
<h1>Sticky positioning</h1>
<dl>
<dt>A</dt>
<dd>Apple</dd>
<dd>Ant</dd>
<dd>Altimeter</dd>
<dd>Airplane</dd>
<dt>B</dt>
<dd>Bird</dd>
<dd>Buzzard</dd>
<dd>Bee</dd>
<dd>Banana</dd>
<dd>Beanstalk</dd>
<dt>C</dt>
<dd>Calculator</dd>
<dd>Cane</dd>
<dd>Camera</dd>
<dd>Camel</dd>
<dt>D</dt>
<dd>Duck</dd>
<dd>Dime</dd>
<dd>Dipstick</dd>
<dd>Drone</dd>
<dt>E</dt>
<dd>Egg</dd>
<dd>Elephant</dd>
<dd>Egret</dd>
</dl>
</body>
</html>
6、relative + absolute
如果父元素设置了 position: relative;，子元素设置了 position: absolute; ，那么子元素就用相对于父元素的位置进行偏移。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Positioning context</title>
<style>
body {
width: 500px;
margin: 0 auto;
position: relative;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<h1>Positioning context</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">Now I'm absolutely positioned relative to the <code><body></code> element, not the
<code><html></code> element!</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
will do: <img src="long.jpg"></p>
</body>
</html>
7、z-index
多个元素在同一个位置显示时，可用 z-index 属性决定哪个元素在最上面， z-index 数值最大者，显示在最上面。试着修改下面 z-index 的值，看看效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style>
body {
width: 500px;
margin: 0 auto;
position: relative;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
z-index: 1;
}
p:nth-of-type(1) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
z-index: 2;
}
</style>
</head>
<body>
<h1>z-index</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">Now I'm absolutely positioned relative to the <code><body></code> element, not the
<code><html></code> element!</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
will do: <img src="long.jpg"></p>
</body>
</html>
