2018.08.10 css中position定位问题

一、absolute

        absolute:绝对定位。越独立越强大,无依赖性。不受容器的限制。独立的absolute可以摆脱overflow的限制,无论是滚动还是隐藏。absolute与float不能一起使用,如果absolute生效,则float是无效的。绝对定位可以配合margin实现相对定位。动画尽量作用在绝对定位元素上。

二、relative

默认参照父级原始点为原始点;如果无父级,以文本的上一个元素的底部为原始点,配合TRBL进行定位;当父级内有padding属性时,参照父级内容区的原始点进行定位。
  (1)不存在TRBL,参照父级左上角;没有腹肌,参照浏览器左上角;没有腹肌元素,但是存在文本,则以文本的底部为原始点进行定位并将文字断开。
  (2)设定TRBL,并且父级没有设定position属性,以父级左上角为原点进行定位
  (3)设定TRBL,并且父级设定position属性,以父级左上角为原点进行定位,但是如果父级有padding属性,那么以内容区域的左上角为原点进行定位。

   综上所述,relative均以父级左上角进行定位,但是受padding的影响。

   这样,我们就可以得知为什么要选用relative定位父级元素,absolute定位内部元素。因为我们布局时用relative后,就不只是用float布局页面了,还可以用TRBL进行布局。但是如果用absolute来布局页面,搜有的DIV都相对于浏览器的左上角定位,这样适配性会大大下降,用户体验度很低。所以只能用与将某个元素定位于属性为absolute的元素的内部的某个位置。

三、fixed

     fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

原文地址:https://www.cnblogs.com/sccwxl/p/9455864.html