css绝对定位和相对定位实例。

先写一段简单代码：

<! DOCTYPE html >

< html lang = "en" >

< head >

    < meta charset = "UTF-8" >

    < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

    < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >

    < link rel = "stylesheet" href = "try.css" >

    < title > Document </ title >

</ head >

< body >

    < div class = "try" ></ div >

    < div class = "try1" >

        < div class = "try2" ></ div >

    </ div >

</ body >

</ html >

.try {

    width : 100px ;

    height : 100px ;

    background-color : #f40 ;

}

.try1 {

    width : 100px ;

    height : 100px ;

    background-color : navajowhite ;

    top : 0px ;

}

.try2 {

    width : 50px ;

    height : 50px ;

    background-color : red ;

    /* position: relative; */

    border : 1px solid red ;

    bottom : 50px ;

}

先将position:relation相对定位注释,                                                                然后取消注释，既加上相对定位，

可以看到。                                                                                                      可以看到。    

                                                        

这里设置的是bottom:50px;   然而此时 try2是相对于父级 try1 , 由此可见，此时的bottom是我们try2上边框下部，与父级上边框下部的距离。同时测试了一下right也是一样的道理。

然后将relation改为absolute（改为绝对定位）, bottom改为right；可以看到。

               

相对定位是相对于页面的。 绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

而如果在.try1中加入relative,                                                                          如果在.try1中加入absolution,

可以看到                                                                                                         可以看到

                                                               

由此可见 绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序（就像车在高架桥上一样桥上和桥下互不影响）。

而相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框（不能撞车！）。