absolute、relative一些問題

最新推荐文章于 2024-10-09 11:16:57 发布

原创最新推荐文章于 2024-10-09 11:16:57 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#XHTML #CSS #HTML

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文深入解析CSS中元素定位的两种方式——绝对定位与相对定位，通过实例展示它们的区别与应用场景，帮助开发者更好地掌握布局技巧。

摘要生成于 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> absolute relative </title>

<style type="text/css">
#idGlideView{height:100px;margin:100px auto; border:solid 1px red; top:50px;position: relative}
#idGlideView div{width:500px;height:100px;position: absolute}
#idGlideView div a{width:500px;height:50px;filter: alpha(opacity=50);opacity: 0.5; background:#000; color:#fff; text-decoration:none;}
</style>

</head>
<body>
<div id="idGlideView">
  <div style="background-color:#006699;"> <a href="/">1111111</a> </div>
  <div style="background-color:#FF9933;"> <a href="/">2222222</a> </div>
  <div style="background-color:#9999FF;"> <a href="/">3333333</a> </div>
  <div style="background-color:#006699;"> <a href="/">1111111</a> </div>
  <div style="background-color:#FF9933;"> <a href="/">2222222</a> </div>
  <div style="background-color:#9999FF;"> <a href="/">3333333</a> </div>
</div>


</body>
</html>

外部“idGlideView”层的position无论设置为“absolute”或者“relative”。

只要其内部的div的position设置为“absolute”，这些div就会叠加。

只要其内部的div的position设置为“relative”，这些div就会排列开来。

“任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移”