CSS深入理解之z-index_技术问答

TokugawaNakashima

什么是定位元素？: 老师，我好像知道啦。视频里定位元素指的是tag上的posotion attribute。; 2020-09-12 1回答·838浏览

润晗代码

父元素设置positon relative子元素z-index会失效为什么？: 2020-04-06 0回答·1224浏览

慕斯卡655398

定位元素默认z-index: auto，可以看成z-index: 0，这条规则，img标签可以，为什么span不可以，同样都是inline呀: 2020-03-05 2回答·1163浏览

qq_白菜_15

除了absolute，怎么实现同级元素文字在float修饰的img元素上方？: 已采纳慕容1529948 的回答; fixed应该也可以吧; 2019-08-05 2回答·1071浏览

zndy119

为什么box是非层叠上下文box: 如果要创建层叠上下文，需要是定位元素，且z-index属性不为auto ，你说的block块状水平盒子是在同一个层叠上下文中的层叠水平比较，个人理解哈; 2019-07-18 1回答·900浏览

沧海的雨季

老师,根元素的z-index是等于0吧?: 是的 1; 2019-05-12 1回答·1157浏览

沧海的雨季

产生层叠上下文的元素是不是同时z-index=auto呢?: 是的，没错，可以打开控制台看一下; 2019-05-12 3回答·1014浏览

我自安然

very斯国一: 靠猥琐; 2019-05-10 1回答·1060浏览

彈指

2018年首问: 学了几天。。。; 2018-01-12 2回答·1435浏览

故友晨露

Css选择器的标准语法: 2017-12-12 2回答·1402浏览

貌似祸害

按照层叠顺序，inline-block和inline是同级，那img为什么会到文字下面去呢？: 不是后来居上吧我把图片放到后面文字还是会在图片上面应该是float覆盖了inline的特性; 2017-11-06 3回答·1591浏览

沉默技术博客

为什么我跟你写的差不多一样，但是背景还是在图片上面的？: 你的style 样式a 都没有定义所以不产生效果...; 2017-08-23 1回答·782浏览

qq_青柠_12

求助！！！！！！！！！！！！！！！！！！！！！！

<!doctype>
<html>
    <head>
        <style>
            @keyframes fadein {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
            body {
                margin: 0 0;
                padding: 0 0;
            }
            text {
                position: absolute;
                /*根据图片调节，我的图片是200px*200px*/
                width: 200px;
                margin: 180px auto;
                text-align: center;
            }
            img {
                animation:fadein 5s 1;
                -webkit-animation:fadein 5s 1; /* Safari 和 Chrome */
            }
        </style>
    </head>
    <body>
        <text>看看看看看看看看看</text>
        <img src="1.jpg" alt="">
    </body>
</html>

自己写的

2017-08-02 4回答·1461浏览

Samuel_Yang

H5上面套用SUI发现的一个问题

在动态模板上使用popup组件，仅仅加class和dom是不行的，也需要用动态模板的方式创建popup，参看官方文档

动态的 Popup

2017-05-04 5回答·2679浏览

方与圆0

z-index:33是什么意思？: 已采纳慕粉1212452011 的回答; 学过数学的数轴吧？z-index就相当于Z轴，z-index:33 就是它在Z轴的具体位置; 2017-03-30 1回答·1761浏览

水丿灵

position:sticky: 已采纳田心枫的回答; position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。; 2017-03-29 2回答·1481浏览

水丿灵

z-index干嘛用的: 已采纳田心枫的回答; 这是一个css样式，z-index是改变元素的层级，数值越大，层级越高。有一个很直观的方法，就是打开Chrome/Firefox中审查元素（F12），在这个开发者工具有一个叫3D视图的东西，点击它就能看到一个网页的立体视图，层级一目了然。; 2017-03-29 1回答·1584浏览

慕粉1404507027

动态效果提问: 可以设置hover时图片发生位移，定位到顶层; 2017-01-11 1回答·1467浏览

lxlacie

定位属性中的：position:sticky 是什么样的定位？: 已采纳慕神8718614 的回答; position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。; 2016-12-20 2回答·2356浏览

好好学习天天向上好开心快乐

麻烦举个例子吧: 自己敲一段代码试试; 2016-12-07 1回答·1502浏览

雨中的鱼L

js如何获取body下子元素的最大z-idnex值？

已采纳月下风物语的回答

技术有限，我的方法比较死板。代码如下：

var DOMs = document.all;//获取所有DOM
var maxIndex = 0;//最大z-index
var curIndex = 0;//当前z-index
for(var i = 0;i < DOMs.length;i++){
    curIndex = document.defaultView.getComputedStyle(DOMs[i],null)["z-index"];//获取z-index的值
    curIndex = curIndex == "auto" ? 0 : 1;
    maxIndex = curIndex > maxIndex ? curIndex : maxIndex;
}
console.log(maxIndex);

2016-12-05 2回答·2749浏览

嘛也不会

没明白什么是层叠上下文？: 如果你用过ps那么知道图层的原理 z-index跟图层的原理差不多; 2016-10-27 2回答·1771浏览

小左向右走

老师可不可直接进入主题讲实例: 我也感觉废话超多; 2016-10-20 2回答·1426浏览

无处安放的青春

什么是定位元素sticky: position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。一些常见的应用这个属性的一般是侧边栏和底部内容; 2016-10-06 2回答·1563浏览

无处安放的青春

z-index问题: 如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方。详细参考连接——http://www.cnblogs.com/dolphinX/p/3262469.html; 2016-10-06 4回答·1499浏览

薇笑的夏娃

该如何理解父元素设置position后不会覆盖img，而img的兄弟元素设置position后会覆盖img？如何从z-index层面理解？

一般的定位元素（z-index未设置，默认auto）是不会创建层叠上下文的。所以你的例子父元素的背景当然就被子元素覆盖，而sisiter元素block当然就覆盖img元素(inline-block)。然后说下层叠上下文。层叠上下文只是针对子元素的。这样index数值是负数的时候就会显示在父元素背景之上！！

2016-09-08 3回答·3325浏览

传说中的小白龙

这里的层叠水平是后面一节的层叠顺序里的那一阶一阶的水平吗: 2016-08-31 2回答·1301浏览

yongzoux

z-index 嵌套的问题: 拥有嵌套关系的z-index的属性是由其父节点决定其所在的位置，上述有两个被div包裹的img标签，虽然上一个z-index属性比下一个z-index的值要大，但是按不加父节点来说是遵循大者为上，小者为下，所以小的z-index的值就是父节点。; 2016-08-28 2回答·1749浏览

eva1963

老师的个人博客网址: 2016-07-06 1回答·532浏览

侠客岛的含笑

老师讲课的工具是什么？自己写的js网站吗？: PPT; 2016-06-08 1回答·1076浏览