一、relative 属性值
- relative表示,相对于默认位置(即static时的位置)进行偏移,即定位基点是元素的默认位置。
- 它必须搭配top、bottom、left、right这四个属性使用,用来指定偏移的方向和距离。
- 必须注意的是在文本流中的位置依然存在。
- 当父级、TRBL、padding组合作用时,relative元素具有以下属性:
1). 如果没有TRBL,以父级的左上角,在没有父级的时候,他是参照浏览器左上角(到这里和absolute第一条一样),如果在没有父级元素的情况下,存在文本,则以文本的底部为原始点进行定位并将文字断开(和absolut不同)。
2). 如果设定TRBL,并且父级没有设定position属性,仍旧以父级的左上角为原点进行定位(和absolut不同)。
3). 如果设定TRBL,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置 由TRBL决定(前半段和absolute一样)。如果父级有Padding属性,那么就以内容区域的左上角为原点,进行定位(后半段和absolut不同)。
二、absolute 属性值
- absolute表示,相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。
- 修饰第一条,它有一个重要的限制条件:定位基点(一般是父元素)不能是static定位,否则定位基点就会变成整个网页的根元素html。另外,absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。
- 与relative的区别是其在正常流中的位置不再存在
- right: 0;top: 0; bottom: 0; left: 0; margin: auto;可设置成子盒子在父盒子里居中显示
三、relative 和 absolute的区别
- 正常流中的位置存在与否
- 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。