z-index不起作用


Posted in HTML / CSS onMarch 31, 2021

 一对兄弟节点,insert和parent,parent有两个子节点subtop和subbottom,展现的结果是想让subtop在insert上面,subbottom在insert下面,

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .insert{
            position: relative;
            z-index:100;
            background: green;
            width:300px;
            height:300px;
            top:100px;
        }
        .parent{
            /*position:relative;
            z-index: 1000;*/
            width:200px;
            height:200px;
            /*left:0;
            top:-50px;*/
            border:1px solid #eee;
        }
        .subbottom{
            position:relative;
            z-index: 50;
            width:200px;
            height:200px;
            background: red;
            top:-100px;
            left:0;
 
        }
        .subtop{
            position: relative;
            z-index:1100;
            width:100px;
            height:100px;
            left:0;
            top:0;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="insert"></div>
    <div class="parent">
        <div class="subtop"></div>
        <div class="subbottom"></div>
    </div>
</body>
</html>

其实原理也很简单,就是利用了z-index的覆盖问题,在写的过程中我发现无论怎么改变,insert的z-index总是无效的,于是百度了一下z-index无效的情况,一共有三种:

  1. 父标签 position属性为relative;
  2. 问题标签无position属性(不包括static);
  3. 问题标签含有浮动(float)属性。

这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了,他的解决办法有是三个:

  1. position:relative改为position:absolute;
  2. 浮动元素添加position属性(如relative,absolute等);
  3. 去除浮动。

所以,去掉parent的position和z-index,达到了我想要的效果。

HTML / CSS 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
元素水平垂直居中的方式
Mar 31 #HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
简单实现一个手持弹幕功能+文字抖动特效
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 #HTML / CSS
Web前端:CSS最强总结 附详细代码
血轮眼轮回眼特效 html+css
css3 filter属性的使用简介
Mar 31 #HTML / CSS
You might like
php array的学习笔记
2012/05/16 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
python实现simhash算法实例
2014/04/25 Python
python进程类subprocess的一些操作方法例子
2014/11/22 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python求质数的3种方法
2018/09/28 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
高中军训感言500字
2014/02/24 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
团结友爱主题班会
2015/08/13 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python