您的位置：首页 > 其它

position与z-index的组合

2016-04-16 11:08 621 查看
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;的效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航