web前端面试常见问题二 ------css布局（position）

web前端面试常见问题二

                 ------css布局（position）

   前言：博主我今年大三，web前端学了也有小半年啦，因为大四没课啦，所以已经开始找实习，面试了很多大大小小的公司，有失败也有成功。接下来我将和大家分享一下我在各个公司遇到的一些常见面试题，希望能和大家相互探讨，共同进步。

    二.position

       position这个属性对于页面布局实在是太重要啦。w3c的官方定义如下：

定义和用法

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

可能的值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

最常用的值有两个分别是absolute（绝对定位），relative（相对定位），如果你学了web前端，却连这两个属性都没搞清楚，那么你就太差劲啦。

position：relative表示相对定位，是对于自身正常位置进行定位（这个比较好理解，我就不举例子解释啦）

position：absolute表示绝对定位，是相对于static定位以外的第一个父元素定位的。

举个例子，代码如下：

 <div id="parent">
        <div id="children"></div>
    </div>

当父元素position为relative（或者absolute）时

#parent {
        position: relative;
        width: 500px;
        height: 200px;

        margin-top:100px;
        background-color: red;
    }
    #children {
        position: absolute;
        width: 200px;
        height: 100px;

        top: 0;
        background-color: green;

    }

效果如下：

当父元素position为static（默认值）时，布局效果如下：