position与z-index的组合

position制作层叠,并用z-index设置层的优先级,这是最常用的用法

只要设

position:absolute;

left:0px;
top:0px;

这是相对浏览器定位的情况,如果是相对于父元素定位,并制作重叠,要在父元素上设置定位position:relative;

在 dreamwear中如下设置:


当为position: absolute;的效果

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1,因此它在文本的后面出现。</p>
</body>
</html>


如果不设置z-index,则会根据元素的添加顺序设置层的优先级,后面添加的元素会覆盖前面的元素。




修改position: relative;的效果



修改top属性为top:70px;的效果



修改top属性为top:-70px;的效果


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值