CSS之绝对定位深入研究

最新推荐文章于 2025-08-21 16:44:59 发布

原创最新推荐文章于 2025-08-21 16:44:59 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #border #class #文档 #html #div

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

　　一、下看个两个例子

　　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.运行的结果图1

　　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.修改后运行结果图2

　　二、对结果的分析

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

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