css z-index堆叠顺序属性笔记

原创 国哥笔记  2017-12-25 17:30  阅读 1,193 views 次

z-index属性定义及用法

1、在css中,z-index属性是用来定义元素的堆叠顺序,堆叠顺序高的元素总是会显示在堆叠顺序较低的元素的前面;

2、z-index属性一般用在有堆叠元素的场景,用来规定元素的堆叠顺序;

z-index属性值

  • auto :堆叠顺序与父元素相等(默认)。
  • 数字:元素的堆叠顺序;
  • inherit:从父元素继承z-index属性的值。

语法格式:

z-index:auto / 数字 / inherit;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css z-index堆叠顺序属性笔记</title>
<style>
img{
position:absolute;/*position属性*/
left:0px; top:0px;
z-index:-1;
}
</style>
<head/>
<body>
<p>z-index属性</p>
<img src="https://www.ggbiji.com/wp-content/themes/Nana3.18/images/logo.png" width="200px" height="70px" />
<p>z-index属性演示:由于图片的设置了z-index属性-1,</br>所以图片在文字之下</p>
</body>
</html>

运行结果:

css z-index堆叠顺序属性笔记

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-z-index.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情