CSS 元素的定位之相对定位 position: relative

在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原本应该在的位置上。

要对页面元素使用定位技术,必须 position属性设置为 static 之外的其它 3 个属性值,即相对定位、绝对定位、固定定位。

相对定位

当一个元素的 position属性设置为 relative,它将使用相对定位。相对定位的元素在普通流中进行定位,它将出现在文档流中原本的位置。然而,可以通过设置水平或垂直偏移量,使它相对于原本的位置,偏移指定的距离,移动到新的位置。如果没有设置偏移,或设置的偏移量为 0,那么它仍将保持在原来的位置。

相对定位的元素,通过 left、right 属性来定义水平偏移量,top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离,right 表示相对于原本位置的右外边界左移的距离,top 表示相对于原本位置的上外边界下移的距离,bottom 表示相对于原本位置的下外边界上移的距离。并且,偏移量可以是正值,也可以是负值,负值表示向相反的方向移动。

left、right、top、bottom 这 4 个属性的值,可以是长度值(可以是绝对单位或相对单位),也可以是百分比。使用百分比时,水平偏移量根据其父元素 width 属性的值计算得到,垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是,在设置偏移时,如果父元素没有显式定义 height 属性,就等同于 height 属性的值为 0。

接下来通过一个实例,来理解相对定位的原理和效果。假设页面上有一个容器 wraper,其中包含三个子元素:

  1. <div id = "wraper">
  2.    <div></div>
  3.    <div></div>
  4.    <div></div>
  5. </div>

假设这些子元素都水平排列,并具有 10px 的外边距。为了方便查看,为容器和子元素分别添加了边框。CSS代码如下:

  1. #wraper  {
  2.    width: 366px;
  3.    overflow: hidden;   /* 防止父元素高度塌陷 */
  4.    box-sizing: border-box;
  5.    border: 2px dashed #ccc;
  6. }
  7. #wraper > div {
  8.    float: left;   /* 让元素水平排列 */
  9.    margin: 10px;
  10.    width: 100px;
  11.    height: 80px;
  12.    border: 1px solid #ccc;
  13.    box-sizing: border-box;
  14. }

未使用相对定位前,三个子元素依次水平排列,并各自占据自身在文档流中原本的位置,运行结果如图 5‑16 所示:

元素未定位图5-16 元素未定位

从上图可以看出,第二个元素的左右两侧均有 20px 的水平外边距。现在对第二个元素使用相对定位,把它的 top 属性设置为 20px, left 属性设置为 30px:

  1. #wraper div:nth-child(2) {
  2.    top: 20px;
  3.    left: 30px;
  4.    position: relative;
  5. }

从前面的介绍可知,如果将 top 设置为 20px,框就会相对于原本位置的上边界下移20px。如果left 设置为 30px,那么框就会相对于原本位置的左边界右移30px。运行效果如图 5‑17 所示:

相对定位元素图5-17 相对定位元素

上图中,虚线框表示第二个元素原本的位置(当然,这个虚线框是人为加上去的),它相对原本位置右移 30px,下移 20px。可以看出,右移 30px 后,它已经覆盖到第三个元素。并且,在下移 20px后,它已经移到父元素的外面,即便如此,父元素的尺寸依然不变,也不会因此而被撑大。

由此可知,相对定位的元素,无论设置偏移,它仍然占据文档中的原有位置。设置偏移之后,只是在视觉上相对于原有的位置移动了而已,并且对父元素和兄弟元素的布局都没有任何影响,但可能会覆盖其他元素。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

展开阅读全文

没有更多推荐了,返回首页