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 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
一段php加密解密的代码
2006/10/09 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
PyCharm 常用快捷键和设置方法
2017/12/20 Python
python连接mongodb密码认证实例
2018/10/16 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
代办委托书怎样写
2014/04/08 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2019大学生实习报告
2019/06/21 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
公历12个月名称的由来
2022/04/12 杂记