請看測試代碼，如下
<!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就会排列开来。
“任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移”
分享到：
相关推荐
`position`属性有多个可选值，其中`absolute`和`relative`是两个最常使用的值，它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流，即元素会...
关于 position、absolute、relative 层叠加的技巧 Position 属性是 CSS 中的一种布局方式，用于控制元素在文档中的位置。Position 属性有五个值：static、relative、absolute、fixed 和 inherit。其中，static 是...
本文将详尽地探讨`position`属性中的`relative`和`absolute`值，以及它们在网页设计中的应用。 首先，`position`属性的默认值是`static`，这意味着元素遵循正常的文档流，即按顺序从上到下、从左到右排列。但当我们...
04absolute_relative.html
absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档流中，但允许使用偏移属性进行相对定位。正确使用这两个属性，可以帮助我们实现复杂的页面布局...
CSS Position relative 和 absolute 的区别 在 CSS 中，position 属性 plays a crucial role 在排版元素中。在 position 属性中，有五个值：static、inherit、fixed、absolute 和 relative。今天，我们将深入探讨 ...
总之，通过本文的介绍，我们可以了解到CSS中的absolute与relative定位方式的区别和它们各自的应用场景，它们在网页布局中的运用能够有效地解决布局问题并创造丰富的视觉效果。对于前端开发者而言，灵活运用这两种...
本文件主要探讨了`position`属性的两个关键值：`relative`和`absolute`，这些知识点对于创建复杂的网页布局至关重要。 首先，我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position...
用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值：static、fixed、absolute和relative， 后面两个在布局中的定位里是经常用到的，...
通过对`position:relative`与`position:absolute`的理解和应用，我们可以解决许多复杂的布局问题。本文介绍的问题只是CSS布局中常见挑战之一，通过适当调整CSS属性和HTML结构，可以有效克服这些问题，确保页面布局...
HTML的relative与absolute区别：说实话html这门语言算的上是这个世界上最简单的一门语言了，标签语言嘛，就是标签多了点英文单词超多，不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是...
《CSS position属性详解：absolute, relative及其他值》 在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局方式。position属性有五个基本值：static、relative、absolute、...
然而，需要注意的是，`position:relative`可能会改变元素的大小计算方式，尤其是在与`absolute`或`fixed`定位的子元素一起使用时。如果父元素设置了`position:relative`，并且有绝对定位的子元素，那么子元素的定位...
今天在写一个购物车里面选择发货地址的部分时，多个收货地址用到了UL标签，由于每个地址的后面有个“修改地址”的功能，而且位于li标签的右边，于是就用到了，position：absolute； right：10px；这样把“修改地址”...
其中，CSS中的“absolute”和“relative”定位是经常被讨论的话题，它们分别代表绝对定位和相对定位。在本文中，我们将深入探讨这两个定位属性的特点以及它们之间的关系和区别。 首先，我们要明白“relative”和...
相反，它会相对于最近的已定位祖先元素（即拥有非`static`定位的父元素，如`relative`、`absolute`或`fixed`）进行定位。如果没有这样的祖先，元素将相对于浏览器窗口或视口（初始包含块）定位。 下面是一个简单的...