现在的位置: 首页 > 综合 > 正文

CSS中应用position的absolute和relative的属性制作浮动层

2013年10月01日 ⁄ 综合 ⁄ 共 580字 ⁄ 字号 评论关闭
        折腾了好久,z-index设置的快到天文数字了,就是没有预期的结果出来,很郁闷了一阵子!
        我的浮动层结构大概如下:
                <div id="container">
                          <div id="content">
                          </div>
                </div>
         要实现的是content层的浮动。
         刚开始的时候想着通过z-index的值来实现不同的层,position属性都没有特别关注。但是结果怎么也出不来,后来查找资料得知position属性可以理解为是本元素针对父元素的定位。只要把本元素的position属性设置为:absolute,然后把父元素的position属性设置为:relative,那么本元素的left,top属性就是针对父元素的值了,而不是正对document窗口了。
       本例中当container的position为relative时,content的position为absolute才有效。这时候content的left:0;top:0就不再针对document窗口了,而是针对id为container的这个div了。
       为了纪念白白逝去的无数光阴,也算是为自己的无知买单,写此以备忘。
 

抱歉!评论已关闭.