学习笔记一:定位

Posted 2020-10-17

CSS中有三种定位机制：普通文档流，浮动和绝对定位。除非指定，否则所有框都是在普通文档流中定位。

浮动：浮动框可以左右移动，直至外边缘碰到包含框或者另一个浮动框的边缘。当一个块级元素浮动起来后，相当于从普通流中抽走了这个块，因而下面的块会占据这个块原本所在的空间即跑到原来的块所在的那一行并占据。而浮动起来的块若其上方是普通流中的块级元素，则它依旧浮动在原本块所在的那一行，且会影响到挤上来的另外的普通块。当浮动框与行框相遇，行框会缩短，给浮动框留出空间。

 

相对定位relative：相对于初始的位置在移动。在使用相对定位时，无论是否移动，元素仍然占据原来的空间，因此，移动元素会导致他覆盖其他框。

 

绝对定位absolute：相对于距离它最近的那个已定位的祖先元素移动，若无祖先，则相对于初始包含块。绝对定位使元素的位置与普通流无关，所以不占据空间，普通流中其他元素的布局跟绝对定位的元素不存在时一样。

固定定位flxed:性质上是跟绝对定位相同，不过fixed的参照物是浏览器窗口本身。