z-index 属性 | 学习笔记

简介: 快速学习 z-index 属性。

开发者学堂课程【CSS 快速掌握z-index 属性】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9204


z-index  属性


内容介绍

一、z-index


一、z-index 

Ø  z-index 表示谁压盖着谁,数值大的会压盖住数值小的

Ø  只有定位的元素才有 z-index 值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有 z-index

Ø  z-index 的值是没有单位的,值是一个正整数,默认的 z-index 的值是0

Ø  如果定位元素没有设置 z-index 属性或者 z-index 值设置一样,那么写在 HTML 后面的定位前面的定位元素

.divi 都设置了绝对定位,所以它们就拥有了 z-index 属性,但是并没有给其设置 z-index 属性。没有设置 z-index 属性那么它们的值就为0

我们要观察 HTML 中的结构 .div1 这个元素它写在 .div2 的后面然后就能知道 .div1 这个元素就会压盖住 .div2

< !DOCTYPE html >

<html lang="en">

<head>

<meta charset="UTF-8">

<title>z- index</title>

<style type="text/css">

div{

width: 200px;

height: 200px

}

. div1{

Background-color:#f00

/*绝对定位*/

position: absolute;

/*定位的坐标*/

left: 100px;

top: 100px;

}

.div2{

background-color: #00f ;

/*绝对定位*/

position: absolute ;

/*定位的坐标*/

left: 200px;

top: 200px;

}

</style>

</head>

<body>

<div class="div2"></div>

<div class=" div1"></div>

</body>

都有设置 z-index 属性

2

< !DOCTYPE html >

<html lang="en">

<head>

<meta charset="UTF-8">

<title>z- index</title>

<style type="text/css">

div{

width: 200px;

height: 200px

}

. div1{

Background-color:#f00

/*绝对定位*/

position: absolute;

/*定位的坐标*/

left: 100px;

top: 100px;

z-index:2

}

.div2{

background-color: #00f ;

/*绝对定位*/

position: absolute ;

/*定位的坐标*/

left: 200px;

top: 200px;

z-index:3

}

</style>

</head>

<body>

<div class="div2"></div>

<div class=" div1"></div>

</body>

divi 与 .div2 它们都设置了绝对定位属性所它们就拥有了 z-index 属性 .div1 .div2 都设置了 z-index 属性值值大的会压盖值小的 .div2 的值比 .div1 的值要大那么 .div2 就会压善住 .div1 元素

3

<style>

*{

margin:0;

padding:0;

}

.nav{

width:100%;

height:60px;

background-color:#222222

/*使用固定定位*/

position:fixed;

left:0px;

top:0px:

z-index:9999999999

}

.nav .inner _c{

width:1000px;

height:60px;

margin:0px auto;

}

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数,如获取和操作子网元的方法,以及组(Group)的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中,并通过toChildren函数获取满足特定条件的图元。
36 0
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
|
5月前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
6月前
|
JavaScript
js Array map映射对象多个属性
js Array map映射对象多个属性
42 0
|
JSON JavaScript 数据处理
vue+element 返回数组或json数据自定义某列显示的处理--两种方法
本文是作者开发一个业务需求时,将返回数据列表的其中一个数据长度很长的字段处理成数组,并将其作为子表显示的过程,具体样式如下(数据做了马赛克处理) ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-902560ce.png?x-cos-security-token=v61lCvRHgTvmeijokvUBGGxbT01lDU8ac78083fc31c5e3a734833edd862768549WL7GvROHQNGkc9F
147 0
vue+element 返回数组或json数据自定义某列显示的处理--两种方法
var school_index = wx.getStorageSync('school_index') 如何判断空值
var school_index = wx.getStorageSync('school_index') 如何判断空值
82 0
|
JavaScript 前端开发 Java
18jqGrid - 表格数据SET类方法
18jqGrid - 表格数据SET类方法
48 0
|
分布式计算 Java 大数据
Column 对象_创建1 | 学习笔记
快速学习 Column 对象_创建1
128 0
Column 对象_创建1 | 学习笔记