如何实现子元素在父元素中的绝对定位

wangxiaohui6687

于 2012-03-09 22:13:09 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： css技术文章标签： xhtml html xml

本文链接：https://blog.youkuaiyun.com/wangxiaohui6687/article/details/7338404

css技术专栏收录该内容

83 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现子元素在父元素中的绝对定位。主要包括两个关键步骤：一是为父元素设置相对定位；二是为子元素设置绝对定位，并指定至少一个方向的位置值。通过具体的HTML和CSS代码示例，展示了两个不同位置的子元素如何被正确地绝对定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现子元素在父元素中的绝对定位必须满足以下两个条件：

1、父元素要有相对定位属性（position：relative），

2、子元素在设置绝对定位（position：absolute），并且同时加四个方向（top，bottom，left，right）的任意方向的属性值。

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#main{
width:500px;
height:600px;
border:1px solid black;
position:relative;
}
#one,#two{
width:100px;
height:100px;
}
#one{
background:blue;
position:absolute;
top:100px;
left:100px;
}
#two{
background:yellow;
position:absolute;
top:200px;
left:200px;
}
</style>
</head>
<body>
<div id="main">
<div id="one">1</div>
<div id="two">2</div>
</div>
</body>
</html>