一篇文章带你了解css z-index(重叠顺序)

Python进阶者 等级 774 0 0

div cssz-index层重叠顺序

div层、span层等html标签层重叠顺序样式z-index,平时CSS使用较少,但也会难免会碰到CSS z-index使用。

从基础语法到应用案例教程讲解学习z-index。

一、z-index语法与结构

z-index 跟具体数字

div{
  z-index:100
}

注意:z-index的数值不跟单位。

z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数)。

二、z-index使用条件

z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常CSS让不同的对象盒子以不同顺序重叠排列,CSS就是要z-index样式属性。

三、案例

1. z-index重叠顺序案例

为了方便观察,设置3个DIV盒子,分别设置不同css背景颜色,设置相同CSS高度、CSS宽度。分别设置背景颜色)为黑色、红色、蓝色。CSS width为300px,css height为100px。

css代码(没加z-index属性)


<style>
            .div css5 {
                position: relative;
            }

            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 300px;
                height: 100px;
                position: absolute;
            }

                .divcss5-1 {

                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }

            .divcss5-2 {

                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }

            .divcss5-3 {

                background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

CSS代码(加上z-index属性后) :

<style>
            .div css5 {
                position: relative;
            }

            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 200px;
                height: 100px;
                position: absolute;
            }

            .div css5-1 {
                z-index: 10;
                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }

            .div css5-2 {
                z-index: 20;
                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }

            .div css5-3 {
                z-index: 15;
              background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

html代码

 <div class="divcss5-1"></div>
 <div class="divcss5-2"></div>
 <div class="divcss5-3"></div>

没加的效果:

一篇文章带你了解css z-index(重叠顺序)

加上z-index属性效果:

一篇文章带你了解css z-index(重叠顺序)

2. 案例说明

三个盒子均都使用了绝对定位属性position样式,并且设置相同的高度和宽度样式。为了便于观察CSS使用left、right属性并赋予不同值,让其错落有致。

  • Div css5-1 盒子背景为黑色, z-index:10

  • Div css5-2 盒子背景为红色, z-index:20

  • Divcss5-3盒子背景为蓝色 , z-index:15

为可以看见第一个盒子z-index:10,所以重叠在最下层,而第二个盒子z-index:20,值最大所以最上层重叠,第三个盒子设置z-index:15,居中。

四、总结

本文基于CSS基础,介绍了如何使用z-index重叠顺序样式,在实际DIV+CSS布局时候CSS需要绝对定位样式,并且可以使用left、right进行定位,通过不同z-index值实现层重叠顺序排列。代码很简单,希望能够帮助你学习。

想学习更多前端、Python爬虫、大数据等计算机知识,请前往:http://pdcfighting.com/

收藏
评论区

相关推荐

CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
2020 全球 CSS 报告,大家都在用什么样的技术?
本文来源与公众号「秋风的笔记」 介绍 -- CSS 从 1994 年 10 月首次被提出,到目前为止已经20余年,但是 CSS 早已发生了天翻地覆的变化,2020 的CSS  又是如何的呢? 我们现在可以使用 CSS Grid 轻松制作动态或响应式的布局,以更少的代码来进行自适应布局。CSS-in-JS 无需依赖全局样式表,我们可以将样式与组件写在一起
CSS
css垂直渐变   #example3        {         /\* fallback \*/         background-color:#063053;         /\* chrome 2+, safari 4+; multiple color stops \*/         background-image:-we
CSS
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。  浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width hei
CSS基本用法介绍
CSS介绍 ===== css定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 ===== ### css实列 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ### css注释 /*这是注释*/ CSS的几种引入方
CSS基础知识整理
### **1 什么是CSS?** CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ###
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
CSS Font
CSS Font-Size: em vs. px vs. pt vs. percent =========================================== One of the most confusing aspects of CSS styling is the application of the **font-size** at
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preproces
Selenium2学习(六)
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求。css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁。 这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到。两篇对比学习,更容易理解。 一、css:属性定位