相对定位和绝对定位的比较
相对定位和绝对定位的比较
相对定位和绝对定位的比较
2016-08-05
绝对定位(absolute):
当一个DIV块的位置被定义为绝对定位的时候,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是零,那么它将漂浮在原来的位置上。否则就会以浏览器的上下左右四边为基准进行偏移。
相对定位(relative):
当设了相对的偏移量之后,这个DIV原来所占据的位置(文档流)不会被下面的DIV块挤占,而是空在那里;当偏移后向下或者向右的内容会被隐藏,而 这一点区别于绝对定位,绝对定位会出现滚动条。但是向左或者向右的内容超出当前浏览器的视线,无论是相对还是觉得定位,超出的部分都会被隐藏。
区别如下:
1、相对定位不会失去文档流中的位置,而绝对定位和固定定位都会失去原来在文档流中的位置而被下面的替代;
2、无论是相对、绝对还是固定定位,当偏移量超出上面、左边浏览器窗体(或者说超出可视区域)的时候,超出的内容都会被隐藏;而超出下面和右边的时候,相对定位和固定定位会隐藏超出的部分内容,而绝对定位会出现滚动条。
3、相对、绝对和固定定位都会浮在正常文档流的上面,如果遮盖了正常显示的文档流,可以设置z-index来消除。
举报