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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
细说CSS3中的选择符
Oct 17 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
探讨如何把session存入数据库
2013/06/07 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
js 单引号 传递方法
2009/06/22 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
食品安全承诺书
2014/05/22 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
python脚本框架webpy的url映射详解
2021/11/20 Python
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers