CSS的相对定位和绝对定位

CSS的相对绝对定位

---

• 相对定位（relative）

         1. "相对"要有一个参照物，但这个参照不是别的，是它自己，也就是说没具体设定相对定位的位置，那么

            问：设没设？设在哪儿？为什么要设呢？

            答：设；参照物为自己；因为只有设置位置了才能使top,left,right,bottom生效，也就是说当你设了相对定位的位置后

才能相对自己原来的位置偏移。

         2.代码分析和图形分析

            定位前的位置；           定位后的相对位置

/*css样式*/
.box_Cont1{
      width: 100px;
      height:100px;
      border:1px solid #cccccc;
      background-color: #FF5722;
}
.box_Cont2{
    width: 100px;
    height:100px;
    border:1px solid #cccccc;
    background-color: #FF5722;
    position: relative;
    left: 100px;
    top:50px;
}

<!--html代码-->
<div class="box_Cont1" >自己原来的位置</div>
<div class="box_Cont2">定位后的位置</div>

 

• 绝对定位（absolute）

          1.在布局里不可能有绝对定位的，再怎么样都有一个参照位置的，绝对定位的参照位置就不像相对定位那样是相对自己定位了，至于你想绝对定位的元素为哪个元素，就看该元素的上级或上上级有没有定位了，

       （1）上级或上上级“有”设置定位

            上级或上上级设置了相对定位（position:relative）或固定定位（position:fixed），大多数都用相对定位position:relative；当要绝对定位的元素选定好要参照的位置后（该元素的上级或者上上级），就可以使用top,left,right,bottom来定位位置了

     （2）上级或上上级“没有”设置定位

               如果它的上级或上上级都没设定定位的话就只会会根据body的位置来定位了，也就是说你的绝对定位是相对于body进行定位的

    2.代码分析和图形分析

      定位前的位置          绝对定位后的位置

/*css样式*/
.box_Cont1{
      width: 100px;
      height:100px;
      border:1px solid #cccccc;
      background-color: #FF5722;
      position: relative;
}
.box_Cont2{
    width: 100px;
    height:100px;
    border:1px solid #cccccc;
    background-color: #FF5722;
    position: absolute;
    left:50px;
    top:50px;
}

<!--html代码-->
<div class="box_Cont1" >自己原来的位置</div>
<div class="box_Cont2">定位后的位置</div>

 

        注意：绝对定位是不占位置的，至于第几层你可以通过z-index:这个属性来设置