position的relative , absolute 关系

tianjun309

于 2010-12-02 23:21:54 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

分类专栏： html & Css 文章标签： CSS XHTML HTML XML

本文链接：https://blog.youkuaiyun.com/tianjun309/article/details/83773392

html & Css 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了CSS中绝对定位（absolute positioning）的使用方法及其相对于相对定位元素的位置特性。阐述了当一个元素设置为绝对定位时，它如何相对于最近的非静态定位祖先元素进行定位，并解释了多个绝对定位元素之间的层级关系。

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

<!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" lang="en" > 
<head><title>Absolute</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
</head>

<body>


 <div class="positioned">
  <span class="absolute">Sized Absolute</span>
 </div>
 
</body>
</html>

CSS:

/*
* 如果指定了一个position为relative,则后面定义出来的absolute会相对定位于它
*/
.positioned {
    position: relative;
}
.absolute {
    position: absolute;
    top: 10px;
    left: 10px;
}

(2)如果是absolute里面继续来absolute，则是相对自己上层的absoulte再次相对定位。