【CSS】关于position:absolute布局

在网页中,如果需要left与top属性生效,就必须为这个div的style属性加入position:absolute,这样,此div才能游离于整体的div布局之外,也就是说,你没有加position:absolute之前,所有的div遵循我在《【CSS】关于div的对齐与网页布局》(点击打开链接)所提到的,各种各样布局。

例如下面的代码:

<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>

就得到如下的效果:

如果把position:absolute去掉,那么left与top属性是不起作用的,也就是下面的代码:

<div style="left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>

得到的效果是这样的:

这个加了黑色方框的图层,完全没有按照预想的位置移动。

但不是说,这个left与top就是距离浏览器左上角的距离。它是距离上级div的距离,如果没有上级div,那么才是距离浏览器左上角的距离,就是说相对于body,这个网页最大的图层的距离。

比如下面的代码:

<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>
<div style="position:absolute; left:100px; top:100px; width:400px; height:400px; border:1px solid #000000;" >
	<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>
</div>

得到的是如下的效果:

首先第一个图层就是一开始就用来说明的图层,position:absolute不受任何div的布局的影响,自己游离于体系之外,

然后,第二个图层,没有上级div,所以position:absolute之后的left与top就是自己的左上角相对于浏览器左上角的距离

最后,第三个图层,处于第二个图层里面,其上级div就是第二个图层,存在上级div,所以position:absolute之后的left与top就是自己的左上角相对于第二个图层的左上角的距离。

另外,IE6是不支持position:fixed的,所以要实现那种悬停效果,不妨考虑利用position:absolute与javascript现实。

时间: 2024-11-07 19:25:39

【CSS】关于position:absolute布局的相关文章

css的position:absolute

绝对定位的特性:1.绝对定位的元素以前所占空间会释放,脱离普通文档流,在层级上是最上层的,所以会覆盖html里它的下面的元素. 用途:不用relative限制absolute,(有利于样式的复用),a.实现一个小东西在一个块上. 2.绝对定位的元素有位置跟随的特性,即跟随它html结构里的上一个元素(“ ”也可以). 用途:a.用于布局写某个小东西在某元素的后面(上下左右均可),用margin调距离. 3.绝对定位后元素出现的位置和没定位时一样,可用top,right,bottom,left,m

css中position(absolute)与margin同时使用的情况

1,当元素绝对定位以后,它在父元素的位置是根据top/left/right/bottom来定位的,而margin是根据自身当前位置来定位的 2,当它距离父元素left:50%,top:50%,那就是父元素一半的距离,因为要实现居中即自身的中点在父元素的中间才算,所以margin-left/margin-top 负的自身宽/高的一半,那么正好水平垂直居中. 3,元素在绝对定位以后,left/rigth和top/bottom是没有优先等级的,不像margin-left作用的时候margin-righ

IE6下面 position:absolute 失效导致绝对定位层不显示的原因

在网上看到的,最近遇到好几次,总结就是 当你发现某元素在IE6,7下面无法显示的时候,且这个元素是经过position absolute的,加之前后之类的有浮动,你就要考虑一下兄弟元素,有时候是前面,有时候是后面,加一个<div class="clearboth"></div> 今天早上重构一个机票订购页面的时候,为了配合JS特效所以需要写一个绝对定位浮动层,写完在测试的时候发现,在FF.ie8.ie7.op下都可以正常显示,可是到了IE6的时候,这个绝对定位浮

css position: absolute、relative详解

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab

怕忘记了CSS中position的absolute和relative用法

CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中position主要用于HTML元素的定位,在实际设计中还是非常有用的.但是对于学习者来说都会遇到相对定位和绝对定位到底如何使用,非常打脑壳 不管再咋个打脑壳,大家首要的还是记住position的几个属性值 static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,r

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

css中position属性(absolute|relative|static|fixed)的区别

position属性的相关定义:static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流; fixed:对象脱离正常文档流 我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-

css中position属性(absolute/relative/static/fixed)

css中position属性(absolute/relative/static/fixed): position:static   无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. position:relative 对象遵循正常文档流,相对的是它原本在文档流中的位置而进行的偏移,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. position:abso

CSS之float vs position:absolute

补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 position:absolute 作用与float极其类似. 二者都是将自身浮空(垂直于屏幕) -- 其实是将其容器高度塌陷. 不同点在于:float会改变位置,但 position:absolute 则会保存其原有位置!!! 利用 position:absolute 的这个特性,我们可以更好的