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 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
python判断字符串是否纯数字的方法
2014/11/19 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
详解pandas赋值失败问题解决
2020/11/29 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
GWT都有什么特性
2016/12/02 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
航班延误投诉信
2015/07/02 职场文书
世界文化遗产导游词
2019/08/07 职场文书
总结几个非常实用的Python库
2021/06/26 Python