首页 > 代码库 > css定位、position与float同时使用的情况

css定位、position与float同时使用的情况

  一、css定位

    CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

      1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通流中定位。

      2.绝对定位:position:absolute/fixed;元素框脱离普通文档流。  

      3.浮动:float:left/right;元素脱离普通文档流。

 

  二、对元素同时使用position和float的情况

    经过实践发现,无论position和float谁写在前面或后面,都是position先起作用。

      1.当position为absolute/fixed时,元素已脱离文档流,再对元素应用float失效(即不起作用)。

      2.当position为static/relative时,元素依旧处于普通流中,再对元素应用float起作用。

  

  三、css定位机制之绝对定位机制与浮动定位机制的区别

    1.用position使元素脱离普通流后,该元素不占据空间,用top/bottom/left/right决定位置。

    2.用float使元素脱离普通流后,该元素占据空间,用margin,padding等决定和周围内容的距离等。

 

  (该文供学习交流,欢迎大家共同探讨~)

 

css定位、position与float同时使用的情况