CSS定位

假定元素A有绝对定位(position: absolute)，其参照物规则（即它相对于什么元素进行定位）：

• 如果A没有被包含在任何其他 position: absolute || relative || fixed 的标签里，则A是相对于浏览器窗口进行定位的。
• 如果A被包含在了 position: absolute || relative || fixed 的标签（假设标签名为B）里，则A是相对于B的边沿来进行定位的。

常常用relative定位来给嵌套标签建立一个新的定位上下文。即外层标签是relative定位，内层被包含的标签是absolute定位。
relative的意思可以理解为“相对于我”，即“我内部的所有定位元素，都应该以我为参照物来定位”。

使用z-index可以产生元素堆叠的效果，即某些元素覆盖在另一些元素上方。
网页默认的z-index是0，数字越大，就越堆在上方，即z-index:3的元素会盖住z-index:1的元素。

假设元素D包含了两个元素A和B，D的z-index为100，A的z-index为2，B的z-index为3。堆叠的效果是：A和B都堆在D的上方，而B又堆在A的上方。
D元素变成了它内部元素堆叠的起点，A和B的z-index值都是相对于D来说的，而D在其内部的z-index默认值为0，所以A和B都能盖住D。

z-index的值最好有一些间隙。10、20、30与1、2、3的效果一样，但是前者可以在原有堆叠序列的基础上，更方便地插入其他元素。
如果想要永远置顶一个元素（即永远使它显示在最上方，盖住其他所有元素），就给它一个很大的z-index值，如10000。

隐藏元素，display:none是不占据空间的，而visibility:hidden虽然隐藏了，但仍然占据空间。
如果把visibility:hidden应用到一个绝对定位(position:absolute)的元素上，则效果和display:none一样，不占据空间。因为使用了绝对定位的元素，其本身就已经从正常页面流上消失了，本身即使显示出来，也不占据空间，而是堆叠到其他元素上方。

与绝对定位不同，固定定位（position:fixed）始终相对于浏览器窗口而言。