Z-index

转载于 2018-01-18 15:30:00 发布 · 66 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/loveMis/p/8310500.html

本文深入探讨了CSS中z-index属性的应用，通过实例演示了如何使用z-index将图像置于文本之后，实现页面元素的层级控制。

<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>

<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>