元素的定位问题

元素布局的要点

• 主要影响网页布局的是块元素；
• 块元素有两种主要的布局模式：流式布局与浮动布局；
• 流式布局比较简单，只需遵循两条规则，以是块元素分行显示，二是行内元素在同一行内显示，一行显示不下则折行。
• 对于浮动布局，情况就复杂得多，CSS盒子模型中定义了一个position属性用于指定元素的位置定位模式。

---

静态定位模式，position = static，这是默认的属性值，表明盒子中的元素按照标准流方式进行定位，“该在哪就在那”。

相对定位方式,position=relative,使用相对定位方式的盒子，会相对于它原本的位置有一个偏移（支持正负数，数值为正时，向下/右偏移，数值为为负时，向上/左偏移），到达一个新位置。使用相对定位方式的盒子，仍在标准流中，因此会影响其后继元素的定位。

绝对定位，position=absolute,使用绝对定位的盒子以它“最近”的一个已经定位的父元素为基准进行定位，如果没有这样的元素，则以浏览器窗口为基准。这里所说的“已经定位”是指，position属性被设置为除static以外的所有值之一。绝对行为的盒子从标准流中脱离，它们对后继元素的定位没有影响。

固定定位，position=fixed，采用固定定位方式的盒子以浏览器窗口为基准定位。采用固定定位方式的盒子脱离了原来的标准流，它的“后继”盒子定位时将其视为“不存在”。采用固定定位的盒子不理会父盒子的定位方式。

display与visible属性

• 所有元素都有display属性。尽管display属性的值有很多，但大多数元素display属性的默认值不是block就是inline。可以通过它强制地让块级元素按行内元素布局，或反之；
• 把元素的display设定为none，该元素及所有包含在其中的元素，都不会在页面中显示。他们原先占据的所有空间也都会被“回收”，就好像相关的标记根本不存在一样；
• visibility属性，这个后苏醒最常用的两个相对的值是visible（默认值）和hidden。把元素的visiblity设定为hidden，元素会隐藏，但它占据的页面空间任然“虚位以待”。

来自为知笔记(Wiz)