WEB前端学习 Day4（定位）

一个元素，如何让它摆在自己想要的位置。就需要弄透CSS的定位相关的属性。
首先，一个元素默认是按照文档流进行布局的，比如说三个DIV，它默认会占用三行，三个SPAN，它默认占用一行，当这一行不够时，也会换行。这就是默认的文档流，每个元素根据自己的特性进行布局。有时候需要摆脱文档流，就需要特殊处理。现在开始了解CSS定位中的几种方式。
第一种方式，绝对定位，也就是position:absolute;绝对定位的特性是：给定坐标来决定元素的位置。坐标是相对的，我说离客厅的左边1米，离客厅的上边1米，那么这个位置在客厅里面就定下来了。离卧室的右边1米，离卧室的下边一米，这个位置也定下来了，但问题是，谁是卧室和客厅。这根本上决定了元素的位置。那么从代码上来看。假设现在有三个div，都是嵌套的。即：

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>

又假设id为div1的position为relative（后面有讲），div2的position为默认的static，div3的position为absolute。那么我说div3离左边10px，离下边10px，那到底说的是基于div2的左边下边还是基于div1的左边下边。这是一个非常容易被忽略的地方，absolute是基于relative的父元素进行定位的。也就是div2。那么默认情况下，position都是static的。但是body还是html元素是可以接受子元素进行绝对定位的，至于到底是body还是html元素没研究过。因为要定位的元素发现父元素都是static定位的，那就只能根据body或者html来定位了。
OK，到这里，知道了绝对定位，并且知道了绝对定位它的坐标的根据。

第二种定位方式，相对定位。什么叫相对定位，绝对定位里面提到了过一点它的特性，设置为相对定位的元素下的子元素，如果使用绝对定位，那么就是以它自己为基准进行绝对定位的。这是相对定位的一大特性，还有一点就是，相对定位的元素，也可以指定坐标。比如说我站在客厅中间，我说要移动到我的左边1米处，这就是相对自己定位，position:relative的元素通过指定坐标，则是根据自己现在的位置，进行偏移。这种用法在开发过程中用的比较多。

OK，到这里，知道了相对定位，总结一下，它有两个比较重要的特性
1）相对定位的元素下的子元素如果使用绝对定位，那么绝对定位的坐标就是相对自己而言的。
2）相对定位的元素如果指定坐标，那么是相对自己而言的。

第三种定位方式，固定定位。什么叫做固定定位，当然可能不叫固定定位，名字我也忘记了。比如说，家里有窗户，我希望这个窗户它总是固定在某一面墙上，跟里面客厅的桌子摆在哪里，电视机摆在哪里都无关，窗户一如既往的在那面墙，这就是固定。这就是position:fixed。它总是固定在body元素上（有可能是html元素，没去研究）。也是通过指定坐标来决定位置的，只不过这个坐标总是根据body或者html元素而言的。固定定位就这一特性，没什么可说的，但是一定要理解它的这一特性。

OK，到这里，知道了绝对定位，相对定位以及固定定位。实则还有一种定位，就是position:static，之前说过这是默认的定位方式。也就是随波逐流的跟着文档流，干脆就叫它文档流定位。

OK，到这里，又知道元素默认的定位方式为static，表示文档流定位。那么之前所说的绝对定位，相对定位和固定定位，都涉及到了坐标。设置坐标有4个属性，分别表示上，下，左，右。即top,bottom,left,right。

举个栗子：

<div id="div1" style="position:relative;border:1px solid red;width:500px;height:500px;">
    <div id="div2">
        <div id="div3" style="position:absolute;left:10px;top:20px;">
        绝对定位的元素
        </div>
    </div>
</div>

这个栗子，div3用了绝对定位，它说明的是离div1的左边10px，上边20px。
注意：这里不是相对于div2，而是相对于div1，为什么？因为div2没有设置position:relative，那么它是默认的static。而div1的position:relative，在绝对定位和相对定位中有提到相对定位的这一特性。

再举个栗子：

<input type="text" style="position:relative;right:10px;bottom:10px;"/>

这个栗子说明，这个文本框它自己想要相对于自己偏离一下位置，离现在位置的右边10px，离现在位置的下边10px。

OK，到这里，已经知道了各种定位方式和关于坐标的属性。

思考一下，如果有很多个元素都被定位在同一个位置，那么到底显示的是哪一个？OK，这里还有一个属性，叫做z-index。比如说现在有三个div定位在同一个地方，你想要第一个div显示出来，那么就把第一个div的z-index设置为9，第二个第三个设置为8。这样第一个div就出来了，因为z-index要大一些。那么z-index表示的是什么？它表示的是三维情况下的z轴，z越大，就越在外面，所以就被显示出来了。

那么思考一下这四种定位的特性。
static，按照默认的方式进行定位，随波逐流。
absolute，根据某一relative的父元素进行定位。
relative，根据自己的位置进行偏移。
fixed，根据body或者html的位置进行定位。
仔细想想这些定位的方式，你会发现非常的全。也就使得开发过程中，想要任何元素在任何位置都是可以做到的。
OK ，那么尝试一下布局下面这个东西。要求是：
1）黑色部分，总是固定在左边且填充高度。不会因此出现滚动条。（固定布局）
2）淡黄黄色部分，跟黑色部分一样，总是填充高度，也不会因此出现滚动条。
3）紫色部分，随着内容的增多高度会增高，内容过多时出现滚动条。
提示：黑色部分可以通过固定布局钉死在左边，设置一个宽度，淡黄色部分也是钉死在左边，只不过距离左边一个黑色部分的宽度。而紫色部分，就不用定位，只要给一个margin-left，值为黑色宽度和淡黄色宽度即可。

到这里，需要加强练习，随便去网上看看，看到一个好看点的网站布局或者某一局部还不错的，就可以尝试着去做。可以通过QQ截图把需要的图片截下来，同时也要勤用浏览器的开发者工具。加油！！！