八、CSS布局之定位

HTML、CSS基础课程系列 CSS

CSS布局之定位

定位(position),允许你从正常的文档流取出其中的元素,使他们具有不同的行为。

文档流

在学习定位之前,首先我们来回顾一下前面学习的文档流,上次我们主要简单的介绍了一下文档流大概的行为:从上往下,从左往右。这次来具体分析一下:

  • 块级元素(block):在文档中垂直布局,每个块级元素都显示在上面最后一个块级元素的下面,距离取决于他们之间的外边距。
  • 内联元素(inline):在文档中水平布局,只要父级块级元素内部还有空间,它就一直相邻下去,直到没有空间,那么溢出的内容就将下移到新的一行。
  • 边距折叠(margin collapsing):两个相邻的块级元素之间如果都设置了margin,那么较大的那个保留。

而定位,就是允许我们覆盖上面文档流的行为,来产生其他有趣的效果。

静态定位

静态定位(static)是元素的默认值,也就是把元素放入在文档流中的正常位置。(= _ =!也就是说和我们不写定位一样。)

1
position: static;

绝对定位

绝对定位(absolute),不为元素预留空间,通过指定元素相对于最近的非 static 的 定位祖先元素的偏移,如果没有非 static 的 定位祖先元素,那么回溯到body,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。

注意,偏移属性一般和定位配合使用,它们有left、top、right、bottom。

来看个例子:

1
2
3
<div class="box1">我是盒子1</div>
<div class="box2">我是绝对定位的盒子2</div>
<div class="box3">我是盒子3</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body{
margin:0;
}
div{
width: 300px;
height:100px;
}
.box1{
background-color: yellow;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}

现在是文档流布局格式,在浏览器中是这样:(图1)

现在我们给盒子2添加绝对定位属性,并且给他加上偏移属性

1
2
3
4
5
6
.box2{
background-color: green;
position: absolute;
left:300px;
top:200px;
}

现在在浏览器中是这个样子: (图2)

现在来分析一下,首先盒子2脱离了文档流,并且不预留空间,那么盒子3遵循文档流就应该出现在盒子1下面。
然后看偏移位置,上面偏移200像素,左边偏移300像素,它参照的元素是哪个呢?可以很明显看出来它参照的是body元素,因为它没有非 static 的 定位祖先元素。大家可以下来自己试试,如果有非 static 的 定位祖先元素,那么参照的是谁呢?

注意,margin仍然会影响定位元素,但是它不会发生margin折叠,自己动手试试。

相对定位

相对定位(relative),以元素当前所在位置为参考,不改变页面布局的情况下调整元素位置(因此会在原来的位置留下空白)。还是使用上面的三个盒子的例子,未改变前的位置参照上面图1,添加以下属性:

1
2
3
4
5
6
.box2{
background-color: green;
position: relative;
left:300px;
top:200px;
}

效果如下图:(图3)

你会发现,它不在参照body了,而是参照它原来的位置移动的。并且盒子3并没有移动上去,盒子2原来的位置还是留在那里。

堆叠属性z-index

有一件事情我们还没有考虑到,那就是当页面有很多定位元素,它们有些开始重叠了,那么是什么决定元素出现在其他元素之上呢,那就是z-index这个属性干的事情。
我们使用水平轴(x轴)和垂直轴(y轴)来讨论网页,原点(0,0)位于页面的左上角,自己想象一下和数学的坐标轴的区别。
其实网页也有一个(z轴),它就是一条从屏幕到你的脸(= _ =)之间的虚线,z-index正是决定定位元素在该轴上面的位置,默认情况所有的元素都是0。

注意,z-index只接受无单位的数字,如果是负的,代表在水平面之下。

固定定位

固定定位(fixed),它的工作方式与绝对定位完全相同,只有一个区别,固定定位的偏移位置是参考的浏览器窗口本身,而不是什么定位祖先元素,这意味着你可以创建一些固定的UI项目,例如门帘广告位,持久导航栏等等。提示:现在你可以看本课件的左下角了,你发现了什么?

小结

这节课我们学习了css定位的相关属性,再次温习了元素文档流的概念,以及那些css属性会导致脱离文档流,现在网页设计对你已经敞开大门了,发挥你的想象,创造更多的乐趣吧。

作业

①. 测试这节课学习的所有关于CSS定位的相关属性。

②. 测试堆叠属性z-index的使用。

③. 完成京东商城页面的作业。

教材编写 myxxqy@gmail.com 张超
2017.08.02