CSS之绝对定位深入研究


本文示例源代码或素材下载

一、下看个两个例子

  1.xhtml代码

<body>
 <div class="relative">
    <span class="absolute">Test absolute</span>
 </div> 
</body>

  2.css代码

.relative { position:relative;height:120px; border:2px solid black; }
.absolute { position:absolute; top:10px; left:10px;
               padding:5px; text-align:center; 
               border:5px solid black; background-color:gold; }

  3.运行的结果

  4.改进css

  去掉span父元素的定位。css代码如下,

.relative { height:120px; border:2px solid black; }
.absolute { position:absolute; top:10px; left:10px;
               padding:5px; text-align:center; 
               border:5px solid black; background-color:gold; }

  5.修改后运行结果

  二、对结果的分析

  绝对定位的元素的位置相对于最近的已定位的祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块,根据用户定义的不同,最初的包含快可能是body或者html元素;绝对定位的元素会从文档流中分离,不再占据空间; position:absolute完成绝对定位需要top和left属性的共同作用。

  所以,当我们想使用绝对定位的核心思想是,让一个元素脱离正常文档流的排列,让它相对于另一个元素重新排列。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3