CSS 未应用 z-index

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7814282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:56:10  来源:igfitidea点击:

z-index isn't applied

css

提问by i7nvd

First off, please let me say I'm pretty new to CSS. Still lots to learn! I'm working on a site at https://web.archive.org/web/20130709112702/http://www.thesweet-spot.com/test77

首先,请让我说我对 CSS 还很陌生。还有很多东西要学!我在https://web.archive.org/web/20130709112702/http://www.thesweet-spot.com/test77的网站上工作

Everything is working great, EXCEPT that the main content box is being placed under the fixed-position logo instead of over it, even though the z-index on the logo is lower than the z-index on the content box. What can you geniuses tell me?

一切都很好,除了主要内容框被放置在固定位置的标志下方而不是上方,即使标志上的 z-index 低于内容框上的 z-index。各位大侠能告诉我什么?

回答by animuson

There's actually two reasons:

其实有两个原因:

  1. Its parent is set to show up behindthe logo. Any z-index applied to elements within that parent element will only apply to other elements within that parent. All the elements within the parent will be stacked accordingly, then that entire element will be put behind the logo as specified by its stack order.

  2. A z-index only applies to elements with position of absolute, fixed, or relative. It does not apply to elements with static position.

  1. 它的父级设置为显示在徽标后面。任何应用于该父元素中的元素的 z-index 都只会应用于该父元素中的其他元素。父元素中的所有元素将相应地堆叠,然后整个元素将按照其堆叠顺序指定的方式放置在徽标后面。

  2. z-index 仅适用于具有绝对、固定或相对位置的元素。它不适用于具有静态位置的元素。

回答by PCasagrande

It is constrained by the parent container's z-index. You cannot set a child to a higher z-index than the parent; it caps at the parent's value.

它受父容器的 z-index 约束。您不能将子项设置为比父项更高的 z-index;它以父母的价值为上限。

You could make the stripes a background of the body tag and then set the containerto have no background. Once that is done set containerto a higher z-index.`

您可以将条纹设为 body 标签的背景,然后将其设置container为没有背景。一旦完成设置container为更高的 z-index。`