Appearance
CSS3教程 - 9 定位1
什么是定位？
定位是一种更高级的布局方式，通过定位可以很方便的将元素放到页面的任意位置。
比如说如果要实现下面的布局：
使用浮动或 margin 也可以实现，但是实现起来比较麻烦，另外使用浮动或 margin 很可能对其他元素的布局产生影响，而使用定位的话就很方便了。
下面来学习如何使用定位。
9.1 定位简介
定位使用的核心属性是 position，它定义了元素的定位类型。常见的定位类型有：
static（默认值）relativeabsolutefixedsticky
当 position 属性设置为除了 static 之外的值，则表示开启定位，开启定位后，我们可以使用其他的一些属性来对元素进行布局。下面就依次介绍各种定位方式。
首先我们有下面这样的代码：
html
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: skyblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightpink;
}
.box3 {
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>- 编写了三个 div ，设置了不同的背景颜色而已。
显示如下：
9.2 static默认定位
元素的 position 的默认值就是 static，所以设置了没有任何影响，元素按正常文档流排列。
生活没有任何波澜，过！
9.3 relative相对定位
当元素的 position 属性设置为 relative 时，表示开启相对定位。开启相对定位后，我们可以使用 top、right、bottom、left 四个属性设置元素的相对位置。设置元素相对于自己原来位置的偏移！
举个栗子：
在上面代码的基础上修改：
css
.box2 {
position: relative; /* 相対定位 */
left: 100px; /* 左侧偏移100px，也就是右移100px */
width: 100px;
height: 100px;
background-color: lightpink;
}- 在上面的代码中，使用
position对box2开启相对定位； - 开启相对定位后，就可以使用
top、right、bottom、left四个属性设置 box2 相对于它原来位置的偏移。上面使用了left表示相对于 box2 原来的位置左边偏移了 100px，也就是右移 100px。
显示如下：
元素在水平方向的偏移由 left 和 right 两个属性控制，一般只会使用其中一个：
left越大，定位元素越靠右，可以为负，则向左移动right越大，定位元素越靠左，可以为负，则向右移动
同样，元素在垂直方向的偏移由 top 和 bottom 两个属性控制，一般也只使用其中一个：
top越大，定位元素越靠下，可以为负，则向上移动bottom越大，定位元素越靠上，可以为负，则向下移动
所以实现一开始的效果，只需要使用下面的样式就可以了：
css
.box2 {
position: relative; /* 相対定位 */
left: 100px; /* 右移100px */
top: -100px; /* 上移100px */
width: 100px;
height: 100px;
background-color: lightpink;
}- 首先开启相对定位，然后使用 left 和 top 设置水平和垂直方向上，相对于其自身原来位置的偏移即可，是不是非常的方便。
- 而且使用了相对定位后，只会移动自身的位置，不会对其他元素产生任何影响。
显示如下：
另外使用相对定位会提升元素的层级，例如向上移动 box2 ：
css
.box2 {
position: relative; /* 相対定位 */
left: 50px; /* 右移50px */
top: -50px; /* 上移50px */
width: 100px;
height: 100px;
background-color: lightpink;
}显示如下：
可以看到 box2 遮挡了 box1，也就是 box2 的层级要比 box1 高了。
做个总结：
- 相对定位是元素相对于它在文档流中原来的位置的定位；
- 相对定位 不会脱离文档流 ，元素还是占用原来的位置（灵魂已出窍，肉体还占着），不会对其他元素的位置产生影响；
- 相对定位会提升元素的层级，可以遮挡其他的元素；
- 相对定位不会修改元素的性质，行内元素还是行内元素，块元素还是块元素。
9.4 absolute绝对定位
当元素的 position 属性设置为 absolute 时，表示开启绝对定位。
开启绝对定位后，元素有如下特点：
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化；
- 开启绝对定位后，元素会脱离文档流 ；
- 开启绝对定位后，元素的性质会发生变化，和以前元素浮动脱离文档流一样，行内元素变成块元素，可以设置宽高了，块的宽高变成被内容撑开；
- 绝对定位会使元素提升一个层级；
- 绝对定位是相对于 包含块 进行定位的（下面会讲）。
所以将 box2 设置为绝对定位：
css
.box2 {
position: absolute; /* 绝对定位 */
width: 100px;
height: 100px;
background-color: lightpink;
}显示如下：
可以看到和上面描述的一致：
- box2 的位置没有发生变化；
- box2 脱离了文档流，所以box3上移了，并且 box2 元素的显示层级提升了，所以挡住了box3；
1 包含块
现在还没有介绍绝对定位如何定位，在介绍绝对定位如何定位之前，先介绍一个包含块的概念。
什么是包含块？
- 如果当前元素没有开启绝对定位，那么它的包含块就是离它最近的祖先块元素。
举个栗子：
html
<div>
<span>
<b>hello foooor!</b>
</span>
</div><span>元素的包含块就是<div>元素；<b>元素的包含块也是<div>元素，<div>是离他最近的祖先块元素，<span>是行内元素，不算。
- 如果当前元素开启了绝对定位，那么它的包含块就是离它最近，并且开启了定位的（不是static）祖先块元素。如果所有的祖先块元素都没有开启定位，那么根元素就是它的包含块，根元素就是
<html>元素，也叫初始包含块。
2 定位
说完了包含块，来说绝对定位的定位方式：元素绝对定位是相对于它的包含块进行定位。
举个例子：
css
.box2 {
position: absolute; /* 绝对定位 */
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightpink;
}- 上面为 box2 设置了绝对定位，并设置了顶部和左侧的偏移；
- 因为现在 box2 找不到最近的包含块，所以它的包含块是
html元素，所以 box2 绝对定位是相对于<html>的，也就是左上角。
所以显示如下：
现在给 box2 添加父元素 box4，给box4 添加父元素 box5：
html
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: skyblue;
}
.box2 {
position: absolute; /* 绝对定位 */
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightpink;
}
.box3 {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box4 {
width: 150px;
height: 150px;
background-color: lightgray;
}
.box5 {
width: 200px;
height: 200px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box5">
5
<div class="box4">
4
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>显示如下：
因为 box2 是绝对定位，div4 和 div5 没开启定位，所以 box2 的包含块还是 html 元素，所以 box2 的位置没有变化。
现在将 div5 开启相对定位：
css
.box5 {
position: relative; /* 相对定位 */;
width: 200px;
height: 200px;
background-color: lightyellow;
}- 那么 box2 的包含块就是 box5 了，那么 box2 的绝对定位是相对于 box5 的。
显示如下：
可以看到 box2 相对于 box5 定位了。
如果将 box4 设置为相对定位，那么box2的包含块就会变为box4，box2 就会相对于box4定位：
css
.box2 {
position: absolute; /* 绝对定位 */
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightpink;
}
.box4 {
position: relative; /* 相对定位 */;
width: 150px;
height: 150px;
background-color: lightgray;
}
.box5 {
position: relative; /* 相对定位 */;
width: 200px;
height: 200px;
background-color: lightyellow;
}显示如下：
所以明白了吧，元素开启绝对定位后，元素将相对于其包含块进行定位！
绝对定位在实际开发中是用的最多的，通过设置父元素为相对定位（元素位置、性质不会变化），子元素为绝对定位，也就是子绝父相，可以很方便的实现子元素在父元素中的任意定位。
9.5 fixed固定定位
当元素的 position 属性设置为 fixed 时，表示开启固定定位。
固定定位可以看做是绝对定位的一个特例，所以固定定位的特点和绝对定位的特点一样，例如脱离文档流、行内元素元素变块元素等。
不同的是固定定位是相对于浏览器视口（可视窗口）进行定位的，不会随着网页滚动而移动。
举个栗子：
和上面绝对定位的代码一样，但是将 box2 设置为固定定位：
html
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: skyblue;
}
.box2 {
position: fixed; /* 固定定位 */
right: 0px;
bottom: 0px;
width: 100px;
height: 100px;
background-color: lightpink;
}
.box3 {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box4 {
position: relative;
width: 150px;
height: 150px;
background-color: lightgray;
}
.box5 {
position: relative;
width: 200px;
height: 200px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box5">
5
<div class="box4">
4
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>- 对 box2 开启绝对定位，同时通过 right 和 bottom 来设置偏移。
显示如下：
可以看到 right 和 bottom 的偏移为 0 时，box2 在窗口的右下角，是相对于整个浏览器窗口的，如果网页的内容很长，有滚动条，box2 始终在窗口右下角，不跟随着内容的滚动，一般浏览器右下角的牛皮鲜小广告，就是通过绝对定位来实现的。
9.6 sticky粘滞定位
当元素的 position 属性设置为 sticky 时，表示开启粘滞定位。
什么是粘滞定位？
在有一些网页上会看见，有一些菜单随着内容滚动而滚动，但是滚到某个位置（例如，最上面的时候），它就固定在那里了，不随着内容滚动了。这个就是粘滞定位，粘在那里了。
这里以之前编写的 W3School 导航条为例，添加粘滞定位：
之前的代码：
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/reset.css" />
<style>
.nav {
width: 1180px;
height: 48px;
background-color: #e8e7e3;
margin: 50px auto; /* 左右margin auto，设置导航条居中，盒子模型章节讲过 */
}
/* li整体布局 */
.nav li {
float: left; /* 浮动li元素 */
line-height: 48px; /* 设置行高，这样文字就垂直居中了 */
}
.nav a {
display: block; /** 设置为块元素，行高会继承自父元素，这样也就设置了a的高度和li的高度相同 **/
font-size: 18px;
color: #777777;
text-decoration: none; /* 去除下划线 */
}
.nav a {
display: block;
font-size: 18px;
color: #777777;
text-decoration: none;
padding: 0 38px; /* 让文字有一定的距离 */
}
/* 超链接悬浮效果 */
.nav li a:hover {
background-color: #3f3f3f;
color: #e8e7e3;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Browser Side</a></li>
<li><a href="#">Server Side</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">Web Building</a></li>
<li><a href="#">Reference</a></li>
</ul>
</body>
</html>显示如下：
下面调整一下 body 的高度，让页面出现滚动条，然后给导航条添加粘滞定位：
css
body {
height: 3000px;
}
.nav {
position: sticky; /* 粘滞定位 */
top: 10px; /* 偏移量，上面偏移10px*/
width: 1180px;
height: 48px;
background-color: #e8e7e3;
margin: 50px auto;
}- 上面给导航条添加了粘滞定位，顶部偏移量是10px；
- 粘滞定位也是相对于其包含块进行定位的，这里导航没有开启定位的祖先包含块，所以是 html 元素。
所以当滚动页面的时候，导航条在距离浏览器上面 10px 的时候停住，即使页面在滚动，导航条也不会动。
显示如下：
粘滞定位是一个比较新的定位方式，浏览器对这种定位方式支持的不是很好，尤其是IE，不过现在IE基本不用了，一般在进行类似效果的处理的时候，需要结合 Javascript 进行处理。
内容未完......