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 相关文章推荐
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 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
用PHP4访问Oracle815
2006/10/09 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
教你php如何实现验证码
2016/01/20 PHP
基于PHP制作验证码
2016/10/12 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
JavaScript面向对象编程
2008/03/02 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
canvas的神奇用法
2017/02/03 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python将音频进行变速的操作方法
2020/04/08 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
基于opencv实现简单画板功能
2020/08/02 Python
Python 中如何写注释
2020/08/28 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
改作风抓落实促发展心得体会
2014/09/10 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
机动车登记业务委托书
2014/10/08 职场文书
社团招新宣传语
2015/07/13 职场文书
标枪加油稿
2015/07/22 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
小程序实现侧滑删除功能
2022/06/25 Javascript