关于position（续）-z-index定位

最新推荐文章于 2024-12-29 17:48:31 发布

原创最新推荐文章于 2024-12-29 17:48:31 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

66 篇文章

订阅专栏

本文详细介绍了CSS中z-index属性的作用及使用方法，并通过实例展示了如何利用z-index与其他定位属性结合实现元素的堆叠效果。

名称：z-index
分类：定位
简述：设置对象的层叠顺序
概述：z-index是设置对象的层叠顺序的样式。该样式只对position属性为relative或absolute的对象有效。这里的层叠顺序也可以说是对象的“上下顺序”。

语法：

z-index : auto | number
取值：

auto : 默认值。遵从其父对象的定位
number : 无单位的整数值。可为负数,当值为负数时，被指定元素将位于其父元素之下。

例子：
    <div style="width: 50px; height: 50px; position: absolute; background-color: red; z-index: -1; left: 320px; top: 620px;">z-index:-1</div>
    <div style="width: 50px; height: 50px; position: absolute; background-color: green; z-index: 2; left: 350px; top: 650px;">z-index:2</div>
    <div style="width: 50px; height: 50px; position: absolute; background-color: blue;z-index: 3; left: 390px; top: 690px;">z-index:3</div>

显示效果:

z-index:1

z-index:2

z-index:3

接下来附加一个巧妙运用position:relative/absolute/z-index的案例，很有用的哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{ margin:0; padding:0; list-style:none;}
div { margin:50px auto; width:700px; background:#f6f6f6; border:1px #ccc solid;}
ul { margin:20px;}
ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
li { width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left;}
li a { color:#fff; display:block; width:100px; height:100px;}
li a span { display:none;}
li a:hover { background:#ccc;position:relative; z-index:1;}
li a:hover span { position:absolute; width:205px; height:200px; top:0; left:105px; display:block; background:#f60; z-index:999;}
</style>
<title>无标题文档</title>
</head>
<body>
<div>
<ul>
  <li><a href="#" title="">111<span>11111</span></a></li>
  <li><a href="" title="">222<span>22222</span></a></li>
  <li><a href="" title="">333<span>33333</span></a></li>
  <li><a href="" title="">444<span>44444</span></a></li>
</ul>
</div>
</body>
</html>