第三十六章 定位（一）

前面我们写了一个网页，当然，我们都知道这是一个很简单很基础的网页。只是我们心照不宣的照样拿他出去炫耀罢了，咳咳，这个秘密谁也不许往外说，否则莫怪为师……

串词了，没事，你就当没看见。那么大家看前边的布局的时候有没有觉得很单调乏味呢？想横排，用浮动，浮动之后要清除；想居中，两边补，外补自动有宽度。就这点东西吧，翻来覆去还是这点东西。很无聊的，也很死板的，仅凭这样的三脚猫功夫肯定是搞不出来灵动洒脱的网页来的。

当然了，要是就是某些网游的官网，坚持十年前的套路，十年了，那些结构都没变过，换换背景就是另一家游戏……那你现在的水平应该可以应付了的说。我在说什么你懂的，反正我是不懂的。

得，咱们闲言少叙，书归正文，啪，响木这么一拍呀，别的咱不夸……

那个这一节开始我们讲一些元素的定位方式，其实吧，他们说什么绝对定位相对定位的我也分不清，总觉得有点故弄玄虚。但是我知道每一种定位方式是怎么回事，什么时候该怎么用。反正到目前为止一只狗用一直够用，除了没法装[哔~]。

元素定位方式的属性是：position，他的默认值是static，这个了解下就好，我又是现查的，因为并不常用啊，默认值一般都省略不写了。

现在我们来认识几个特殊的定位方式：

fixed，这个应该是最受新人欢迎的定位方式，好理解，效果明显，也好玩。他是相对于浏览器的定位。

就是你随便怎么上下滚动页面，这家伙就铁了心的不动弹。因为他是相对于浏览器的窗口的，浏览器窗口没移动和变化，那其他的事就跟他没啥关系，这就好像十字路口的交警，任你车来车往，他就站在那里坚守岗位。

然后我们举个简单的例子说明一下：

试试效果吧，你怎么滚动那个红色的元素总在左下角，不会发生移动，如下图：

那么上面的代码大部分都很容易理解了，我来解释一下其中的 left 和 bottom。我们说：position: fixed;; 是说定位方式，相对于浏览器窗口定位。但是我们说他的位置了没有？没有啊！

这 left 和 bottom 就是说明他的位置的，我解释给你听啊： left 就是说元素的左边缘和浏览器的左边缘之间的距离；同理 bottom 就是说元素的下边缘和浏览器的下边缘之间的距离。

然后聪明的你就可以举一反三地说出 right 和 top 的意思了。嗯，这四个东西下节课还要用哦~

留个作业，除了那种悬浮的“在线客服”或者广告之类的东西以外，大家找找 fixed 定位还在哪里被用出了高大上的效果？

本章代码下载：本章代码