CSS:position:relative;的认识

最新推荐文章于 2024-10-15 11:30:28 发布

铁打的螺丝钉

最新推荐文章于 2024-10-15 11:30:28 发布

阅读量418

点赞数

分类专栏： 6、前端文章标签： css 浏览器文档 div border

6、前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS定位的原理

把浏览器窗口想象成一个坐标系统：

CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。

采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言，CSS定位要简单得多。

绝对定位

一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。

要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。

举个绝对定位的例子，假如我们要在文档的四个角落各放置一个盒子：


#box1 {
 position:absolute;
 top: 50px;
 left: 50px;
}

#box2 {
 position:absolute;
 top: 50px;
 right: 50px;
}

#box3 {
 position:absolute;
 bottom: 50px;
 right: 50px;
}

#box4 {
 position:absolute;
 bottom: 50px;
 left: 50px;
}

相对定位

要对元素进行相对定位，应将position属性的值设为relative。绝对定位与相对定位的区别在于计算位置的方式。

采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。

举个相对定位的例子，我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。注意这些图片将在文档中各自的原始位置处留下空位。


#dog1 {
 position:relative;
 left: 350px;
 bottom: 150px;
}
#dog2 {
 position:relative;
 left: 150px;
 bottom: 500px;
}

#dog3 {
 position:relative;
 left: 50px;
 bottom: 700px;
}


   
   
    
    css里的position的值relative、absolute的实际意义
   
   
   
    
   
   
   
   
       
        
        position属性其实是指本体对上级的定位。默认的属性值都是static，静态。 
        最关键的是relative（相对）以及absolute（绝对）。

如： 
        <div id="A">
     <div id="B">
      </div>
</div>

当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。 
        position:absolute: 绝对定位，是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的坐标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 
        
position:relative: 相对定位，是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。 
        注意:相对在无父级时以BODY为原始点,而绝对是以浏览器最左上角为原始点.
下面实例说明上面这句话:
<style>
#wrap{
width:500px;
background-color: red;
height:auto;
}
#column1{
position:absolute;
top:0px;
left:0px;
width:300px;
background-color: green;
}
#column2{
position:relative;
top:0px;
left:0px;
width:470px;
background-color: #FFFF66;
}
</style>
<body style="border:4px blue dotted"> /*这里我用框框出来,好识别*/
<div id="wrap"> 
<div id="column1">这里是第一列</div>
   <div id="column2">这里是第二列</div>
</div>
</body>