您的位置：首页 > Web前端 > css > 正文

CSS绝对定位与相对定位

更多时间：2014-6-7 类别：Web前端浏览量：912

CSS绝对定位与相对定位

CSS绝对定位与相对定位

一、绝对定位

凡是采用position: absolute;后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bottom和left四个方向的边距值来实现。一旦对象被设置绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象而存在。

例如

CSS 代码复制


 
 #a, #b, #c, #d {...}{
     background-color: #000FFF;
     border: 2px solid #00FFFF;
     width: 100px;
     height: 100px;
     margin: 2px 2px 2px 0px;
     float: left;
 }
 
 #b {...}{
     position: absolute;
     top: 80px;
     left: 100px;
 }
 
 #d {...}{
     position: absolute;
     top:80px;
     left: 210px;
 }

这时，b和d元素的位置由top值（上边距）及left值（左边距）而决定，他们已经脱离了a和c的浮动而自成一体，浮动在画面之上。

二、深度(z-index)

由于b和d元素的位置由自身的边距而决定，因此会出现一个问题，即元素的重叠。这种情况下，可以通过设置对象的z-index属性，以设置其重叠的先后顺序，也就是z轴的顺序。

例如

CSS 代码复制



#b {...}{
    position: absolute;
    top: 80px;
    left: 100px;
    z-index: 1;
}

#d {...}{
    position: absolute;
    top: 70px;
    left: 160px;
    z-index: 0;
}

一开始没有设置z-index属性时，d元素位于b元素之上。当使用z-index属性后，可以重新设置他们的z轴顺序。

注：以z-index的数值大小为准，大值对象的层级位于小值对象之上。

三、相对定位

实际上，相对定位就是浮动定位与绝对定位的扩展方式。相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息。position: relative;

不占位的相对定位

当对象采用position: relative;时，该对象虽然进行了相对定位，但其原始的占位信息还存在于文档流及浮动对象中。要想做到绝对定位那样，完全独立于其他对象，自身又可以做到相对定位，可以通过一组定位组合。

例如

HTML 代码复制


<li id="liGroup">
    <li id="a">a</li>
 　 <li id="b">b</li>
 　 <li id="c">c</li>
 　 <li id="d">d</li>
</li>

CSS 代码复制


#liGroup {...}{
    margin: 50px 0 0 50px;　
　  position: relative;
　  border: 1px solid #000000;
　  width: 400px;
　  height: 200px;
}

#a, #b, #c, #d {...}{
    background-color: #eeeeee;
    border: 2px solid #aaaaaa;
    width: 100px;
    height: 100px;
    margin: 2px 2px 2px 0px;
    float: left;
}

#b {...}{
    position: absolute;
    left: 10px;
    top: 30px;
}

此时，b已经视线里相对定位，而且没有占有空间，c和d也都顺移到a的右边。之所以能够实现这样的效果，就在于相对定位与绝对定位的组合。在这里，对付对象liGroup设定position: relative;的绝对定位，但没有设定它的top及left值，所以liGroup仍然可以当做浮动对象使用。同时，将b对象的定位方式由position: relative;改为position: absolute;绝对定位，尽管改为了绝对定位了，但由于其父级是相对定位，所以这里的绝对定位就变成了相对于父级的绝对，而不是针对浏览器进行绝对定位。

标签：position

上一篇：UML对象图的介绍

下一篇：dropdownlist绑定枚举值

您可能感兴趣

CSS绝对定位与相对定位

CSS绝对定位与相对定位

热门推荐

排行榜