CSS_position

1、

HTML Code：

    <div id="example">
                    <div id="div-before">
                        <p>id = div-before</p>
                    </div>
                    <div id="div-1">
                        <div id="div-1-padding">
                            <p>id = div-</p>
                            <div id="div-1a">
                                <p>id = div-1a</p>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ult                                   rices viverra velit.</p>
                            </div>
                            <div id="div-1b">
                                <p>id = div-1b</p>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ult                                   rices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
                            </div>
                            <div id="div-1c">
                                <p>id = div-1c</p>
                            </div>
                        </div>
                    </div>
                    <div id="div-after">
                        <p>id = div-after</p>
                    </div>
                </div>

CSS Code:

    #example {
                    float: right;
                }

                #example p {
                    margin:  .25em;
                    padding: .25em ;
                }
                #div-before,
                #div-after {
                    background-color: #88d;
                    color: #;
                }

                #div- {
                    width: 400px;
                    background-color: #;
                    color: #fff;
                }

                #div--padding {
                    padding: 10px;
                }

                #div-1a {
                    background-color: #d33;
                    color: #fff;
                }

                #div-1b {
                    background-color: #3d3;
                    color: #fff;
                }

                #div-1c {
                    background-color: #33d;
                    color: #fff;
                }

3、DOM图：

4、

position: static

在CSS中所有元素的“position”属性的默认值都是“static”，因为不需要显式的为每个元素设置“position:static”。

两个页面，同时存在“div#div-1”，那么此时你在A面中需要对“div#div-1”进行绝对定位；而在B页面中“div#div-1”又不需要进行绝对定位。

相对定位position:relative

relative称为相对定位，如果你给某个元素指定了postion的值为“relative”，那么你就可以通过“T-R-B-L”(也就是top,right,bottom,left)来设置元素的定位值。

使用relative时有几点需要注意：

• 元素设置了relative时，是相对于元素本身位置进行定位；
• 元素设置了relative后，可以通过“T-R-B-L”改变元素当前所在的位置，但元素移位后，同样点有当初的物理空间位；
• 元素设置了relative后，如果没有进行任何的“T-R-B-L”设置，元素不会进行任何位置改变。

绝对定位position:absolute

absolute是position中的第三个属性值，如果你给元素指定了absolute，整个元素就会漂出文档流，而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。

relative和absolute的结合

元素相对定位“relative”是相对于元素自身定位，而在第三步中大家知道元素绝对定位“absolute”是相对于html。但这种说法只有满足这样的条件才是正常的：“绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置，那么绝对定位的元素的参考物就是html”，这样来，“relative”和“absolute”的结合就能起到很大的作用。

如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。