CSSposition属性 - HelloWorld开发者社区

在CSSposition属性中，absolute和relative的结合使用是非常重要的东西。因为网页设计时用absolute和relative的相结合非常便利。

首先看relative,相对定位，在菜鸟教程上的解释是：相对定位元素的定位是相对其正常位置。而absolute，绝对定位，在菜鸟教程上的解释是：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。基础部分就不说了，主要他两的结合使用，在网页设计时，你可以对第一个元素进行相对定位relative，而第二个用absolute绝对定位，作为一个子级，而relative作为一个父级存在。很明显的例子就是CSS轮播图的制作：

<html>
    <head>
        <meta charset="utf-8" />
        
        <title>#</title>
<style>
#rela{
    
    height: 450px;
 
    width: 800px;
     
    margin:  0;
 
    position: relative;
 
    overflow: hidden;    
    
}



.abos{
    width: 800px;

    height: 2300px;
    
    position: absolute;

    top: 0;

    left: 0;
        
    
}

</style>
</head>
<body>
                   <div id=resa">
                        <div class="abso">
                             <a href="#.html">    <img src=#"  alt="#"  width="800px" height="450px"/></a>
                              <a href="#.html"><img src="#"  alt="#"  width="800px" height="450px"/></a>
                              <a href="#.html"><img src="#"  alt="#"  width="800px" height="450px"/></a>
                              <a href="#.html"><img src="#"  alt="#"  width="800px" height="450px"/></a>
                              <a href="#.html"    ><img src="#"  alt="#"  width="800px" height="450px"/></a>
                                 
                       
                    </div>
                                    </div>
</body>
</html>

以上的结果就是，abso元素会绝对定位在rela元素中，并且超出部分会被overflow隐藏，并且不会影响到abso。