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

来源:互联网 发布:威客圈网络兼职平台 编辑:程序博客网 时间:2024/05/24 05:04
        折腾了好久,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了。       为了纪念白白逝去的无数光阴,也算是为自己的无知买单,写此以备忘。 
原创粉丝点击