`

absolute、relative一些問題

    博客分类:
  • CSS
阅读更多

請看測試代碼,如下

<!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就会排列开来。

 

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

分享到:
评论

相关推荐

    CSS中的position 的值: absolute 与 relative

    `position`属性有多个可选值,其中`absolute`和`relative`是两个最常使用的值,它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流,即元素会...

    关于position、absolute、relative层叠加的技巧

    关于 position、absolute、relative 层叠加的技巧 Position 属性是 CSS 中的一种布局方式,用于控制元素在文档中的位置。Position 属性有五个值:static、relative、absolute、fixed 和 inherit。其中,static 是...

    position的relative和absolute总结

    本文将详尽地探讨`position`属性中的`relative`和`absolute`值,以及它们在网页设计中的应用。 首先,`position`属性的默认值是`static`,这意味着元素遵循正常的文档流,即按顺序从上到下、从左到右排列。但当我们...

    04absolute_relative.html

    04absolute_relative.html

    css position: absolute、relative详解

    absolute让元素完全脱离文档流并相对于最近的已定位祖先元素(或者初始包含块)进行定位,而relative则让元素保持在文档流中,但允许使用偏移属性进行相对定位。正确使用这两个属性,可以帮助我们实现复杂的页面布局...

    css的position里的relative和absolute的区别.docx

    CSS Position relative 和 absolute 的区别 在 CSS 中,position 属性 plays a crucial role 在排版元素中。在 position 属性中,有五个值:static、inherit、fixed、absolute 和 relative。今天,我们将深入探讨 ...

    Div CSS absolute与relative的区别小结

    总之,通过本文的介绍,我们可以了解到CSS中的absolute与relative定位方式的区别和它们各自的应用场景,它们在网页布局中的运用能够有效地解决布局问题并创造丰富的视觉效果。对于前端开发者而言,灵活运用这两种...

    关于CSS position属性值absolute,relative的解释.zip

    本文件主要探讨了`position`属性的两个关键值:`relative`和`absolute`,这些知识点对于创建复杂的网页布局至关重要。 首先,我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position...

    css中定位中的absolute和relative是什么意思

    用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值:static、fixed、absolute和relative, 后面两个在布局中的定位里是经常用到的,...

    position:relative/absolute无法冲破的等级

    通过对`position:relative`与`position:absolute`的理解和应用,我们可以解决许多复杂的布局问题。本文介绍的问题只是CSS布局中常见挑战之一,通过适当调整CSS属性和HTML结构,可以有效克服这些问题,确保页面布局...

    HTML的relative与absolute使用及区别详解

    HTML的relative与absolute区别:说实话html这门语言算的上是这个世界上最简单的一门语言了,标签语言嘛,就是标签多了点英文单词超多,不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是...

    CSS position属性absolute relative等五个值的解释

    《CSS position属性详解:absolute, relative及其他值》 在网页设计中,CSS(层叠样式表)的position属性是至关重要的,它决定了元素在页面上的布局方式。position属性有五个基本值:static、relative、absolute、...

    css中position:relative和overflow:hidden的问题

    然而,需要注意的是,`position:relative`可能会改变元素的大小计算方式,尤其是在与`absolute`或`fixed`定位的子元素一起使用时。如果父元素设置了`position:relative`,并且有绝对定位的子元素,那么子元素的定位...

    li标签的position:absolute与relative案例应用

    今天在写一个购物车里面选择发货地址的部分时,多个收货地址用到了UL标签,由于每个地址的后面有个“修改地址”的功能,而且位于li标签的右边,于是就用到了,position:absolute; right:10px;这样把“修改地址”...

    关于CSS absolute与relative不得不说的话

    其中,CSS中的“absolute”和“relative”定位是经常被讨论的话题,它们分别代表绝对定位和相对定位。在本文中,我们将深入探讨这两个定位属性的特点以及它们之间的关系和区别。 首先,我们要明白“relative”和...

    区别div和span、relative和absolute、display和visibility

    今天我们将深入探讨容易混淆的三个概念:`div`与`span`、`relative`与`absolute`以及`display`与`visibility`。 1. `div`与`span`的区别: - `div`是一个块级(block-level)元素,它会在页面上占据一整行,并且...

Global site tag (gtag.js) - Google Analytics