div的position的四种定位

本文详细解析了CSS中的Position属性,包括static、relative、absolute及fixed四种取值方式,并介绍了它们的具体应用与特点。此外还提到了在使用定位时应注意的margin和padding设置以及元素堆叠时的z-index使用。

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

Position 有四种取值
static
relative
absolute
fixed

static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要

显示指定

relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定

relative并指定top是10象素时,元素实际top就是60象素了。

absolute 绝对定位,直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的

坐标是相对其容器来说的。 容器又是什么呢,容器就是离元素最近的一个定位好的“祖先”,定位好的

意思就是其Position 是absolute或fixed或relative。 如果没有这个容器,那就使用浏览器初始的,也

就是body或者html元素。
标准是说只需要指定left和right,width可以自动根据容器宽度计算出来,可惜ie不支持。
fixed 才是真正的绝对定位,其位置永远相对浏览器位置来计算。 而且就算用户滚动页面,元素位置也

能相对浏览器保持不变, 也就是说永远可以看到, 这个做一些彩单的时候可以用。可惜的是ie还不支持

。(fixed是dw2004唯一没有的值.可能dw8有吧)


最后
不论哪种定位,margin 和padding都应该显示地定义出来,这样在不同浏览器中效果差别会小一些。
当定位了的元素相互交叠,应该指定z-index,z-index越大表示离用户越近。不过z-index也是相对容器

来说的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值