我在这两个选择器之间有点困惑.

是后代选择器:

div p

选择p一个div是否是一个直接的后代？所以,如果p它在另一个内部div仍然会被选中？

然后是子选择器:

div > p

有什么不同？孩子是指直系孩子吗？例如.

<div><p>

VS

<div><div><p>

会被选中还是不被选中？

我试图用:after伪元素CSS选择器设置元素的样式

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

看起来::after元素不能低于元素本身.

有没有办法让伪元素低于元素本身？

我正在尝试使用投影使其看起来像一个div(标题)在另一个"上方".我的问题是"中间"div正在覆盖阴影.我尝试使用z-index将标题div放在中间div上,但它不起作用(阴影仍然被覆盖).当我在div之间休息时,我可以看到阴影,因此我知道代码的一部分工作正常.我有以下HTML代码:

<div id='portal_header_light'>
<img src="Home.png" height="32px" \>
<img src="Wrench.png" height="32px" \>
</div>
<div id='middle'></div>

这个css:

#portal_header_light {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; text-align:center;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    padding: 0px 3px 0px 3px;
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));

    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);

    z-index:5;
}

#middle{
    height:308px; …

我有两个嵌套的CSS元素.我需要让父元素位于子元素的顶部,即z轴的上方.仅设置z-index是不够的.

我无法在子项上设置负z-index,它会将其设置为我实际页面上的页面容器下方.这是唯一的方法吗？

http://jsbin.com/ovafo/edit

.parent {
  position:  relative;
  width: 750px;
  height: 7150px;
  background: red;
  border: solid 1px #000;
  z-index: 1;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: 0;
  color: white;
  top: 0;
}
.wrapper
{
  position: relative;
  background: green;
  z-index: 10;
}

<div class="wrapper">
  <div class="parent">
    parent parent
    <div class="child">
      child child child
    </div>
  </div>
</div>

假设我有这个代码:

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

这个jsFiddle:http://jsfiddle.net/ZjXMR/

现在,我需要<div class="child">在上面<div class="wholePage">但是在jsFiddle中你可以看到之前渲染的子元素<div class="wholePage">.

如果删除parent该类,position或z-index一切正常.这是我需要的正确行为:http://jsfiddle.net/ZjXMR/1/

如果有z-index或没有从页面删除任何东西我怎么能这样做？

我试图使黑色div(相对)高于第二个黄色(绝对).黑人div的父母也有绝对的位置.

码:

#relative {
	position: relative;
	width: 40px;
	height: 100px;
	background: #000;
	z-index: 1;
	margin-top: 30px;
}
.absolute {
	position: absolute;
	top: 0; left: 0;
	width: 200px;
	height: 50px;
	background: yellow;
	z-index: 0;
}

<div class="absolute">
    <div id="relative"></div>
</div>
<div class="absolute" style="top: 54px"></div>

预期结果:

我试图覆盖/忽略元素的堆叠上下文,以便它可以相对于页面根位于z轴上.

然而,根据文章没有人告诉你Z-Index:

如果元素包含在堆叠顺序底部的堆叠上下文中,则无法使其出现在堆叠顺序较高的不同堆叠上下文中的另一个元素前面,即使使用z-index也是如此十亿!

可以通过以下三种方式之一在元素上形成新的堆叠上下文:

• 当元素是文档的根元素(元素)时
• 当元素具有静态以外的位置值和除auto之外的z-index值时
• 当元素的不透明度值小于1时

使用以下示例:

.red, .green, .blue { position: absolute; }
.red   { background: red; }
.green { background: green; }
.blue  { background: blue; }

<div><span class="red">Red</span></div>
<div><span class="green">Green</span></div>
<div><span class="blue">Blue</span></div>

如果第一个div给出opacity:.99;,(这将创建一个新的堆叠内容的第一个节点上),那么,即使如果.red有z-index:1,它还是会被放置在其它元件后面,因为它只是呈现为堆栈内的最高元件.

在jsFiddle工作演示

看起来像这样:

问:有没有办法让元素忽略其任何父元素的堆栈上下文,并要求相对于页面的原始堆栈上下文定位？

我需要一个特定的动态元素始终出现在另一个元素的顶部,无论它们在DOM树中的顺序如何.这可能吗？我试过z-index(和position: relative),它似乎没有用.

我需要:

<div class="a">
    <div class="b"></div>
</div>

<div class="b">
    <div class="a"></div>
</div>

渲染时显示完全相同.出于灵活性目的(我计划分发需要此功能的插件),我真的不想求助于绝对或固定定位.

为了实现我想要的功能,我做了一个条件语句,其中重叠的子元素在阻塞其父视图的情况下将变得透明.它不完美,但它是一些东西.

我目前正在网站上，遇到这种奇怪的行为。我不确定这是一个错误还是如何解决它，所以我想向您寻求帮助。

因此，我有这个标题屏幕的“动画”，该标题的标题位于全屏页面的中央，当您向下滚动时，标题变小并保留在页面顶部。这是一个具有预期行为的工作示例，从中我剥离了所有不必要的代码以使其最小化：

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
	
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});

.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both; …

我需要在已position: sticky设置的元素上显示下拉内容。不幸的是，操纵并z-index没有多大帮助。悬停时显示的内容仍被下一个粘性元素覆盖。

展示多个小程序问题的完整示例：https://jsfiddle.net/tfkh2v0n/3/

最小的例子：

.applet-container {
  position: relative;
  z-index: 1;
}

.applet {
  position: relative;
  z-index: 2;
}

.sticky-header {
    top: 0px;
    position: sticky;
    background: #d1d1d1;
    z-index: 3;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 4;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: gold;
  min-width: 160px;
  z-index: 5;
}

.dropdown-content a {
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
  z-index: 5;
}

<div class="applet-container">
  <div …