相关疑难解决方法(0)

我有两个嵌套的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或没有从页面删除任何东西我怎么能这样做？

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

我需要:

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

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

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

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

如果我们z-index结合使用position: absolute;它可能会将::before元素置于其自身之下.另一个问题有一个很好的例子(jsfiddle.net/Ldtfpvxy).

基本上

<div id="element"></div>

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}

呈现:

因此堆叠上下文/顺序由定义z-index.但是,当我申请z-index: 1;到的元素,z-index: -1;它的::before我不能达到同样的事情.

只有我省略z-index了元素.

任何想法为什么会这样？该元素是否在其::before&::afterpseudos 之后呈现,以便它们变得相同z-index？

工作: …

今天，经过四个小时的调试，我很难学到了这个规则：

如果父级的z-index值为任何值，则无论您如何更改子级的CSS，父级元素都永远无法覆盖（堆叠在其子级元素之上）

我如何通过逻辑理解这种行为？规范在哪里覆盖？

代码（也在CodePen中）：

.container {
  width: 600px;
  height: 600px;
  background-color: salmon;
  position: relative;
  z-index: 99;
  margin-top: 20px;
  padding-top: 10px;
}

h1 {
  background-color: pink;
  position: relative;
  z-index: -1;
  font-family: monospace;
}

<div class="container">
  <h1>1. I can never be covered by parent if my z-index is positive.</h1>
  <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>

图像是祖父母div,黑色半透明叠加是父div,裁剪部分是子div.用户将看到祖父母图像和父叠加,然后他可以使用子裁剪器div裁剪它.我试过并失败了opacity和rgba背景.

这些疯狂的方法似乎对我有用 -

1. 在子div的背景中设置祖父母图像,然后更改x/ y的background-position.
2. 将孩子和父母组合成一个单独的div,并rgba border用作叠加(我朋友的建议).
3. 在stackoverflow上找到了这个,它使用box-shadow而不是边框​​,看起来像#2的类似方法.

我对#2和#3的轻微抱怨是我需要为虚线边框添加另一个div,以便用户清楚地知道他正在裁剪什么.但我对他们所有人的更大抱怨是,这些都不是正确的方法.

有没有一个合适的/更好的/ 2018-ish /"它如此明显,你这个白痴"的方式来做到这一点？

更新:这是基本标记(如果有助于解决此问题,我也可以使用不同的标记)

#grandparentImage {
  background: url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg) no-repeat;
  background-size: cover;
  position: relative;
  height: 500px;
}

#parentOverlay {
  background: rgba(0,0,0,0.5);
  height: 100%;
  position: relative;
}

#childCropper {
  border: 1px dashed #ccc;
  left: 50px;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50px;
}

<div id="grandparentImage">
  <div id="parentOverlay">
    <div id="childCropper"></div>
  </div>
</div>

编辑:这不是标记问题的重复 …

所以我一直在和盒子阴影一起玩,我最近做了类似这样的事情并且它工作得很完美.然后突然间它没有明显的原因停止工作!

我要做的是有一个简单的div框,下方有双阴影,可以产生一种折叠效果.

如果你在jfiddle http://jsfiddle.net/TJuDu/上查看,你可以看到我所做的所有代码.问题是堆叠:before和:after元素,它的位置正确但堆叠错误,阴影位于.layout div后面,当它们应该清楚显示在.box div后面时.如果我删除z-index值,我可以看到位于.box div上方的阴影.

事情是我在另一个页面上完全喜欢这个并且它起作用,然后突然它停止在该页面上工作并且在我做的这个例子上.

我有一些相邻的按钮，我希望它们有框阴影，但我不希望有任何重叠 - 我希望阴影位于所有按钮下方，任何按钮上方都没有阴影。我看过其他人所说的，并且一直在玩弄 :after / :before 并更改 z-index 值，但没有运气。这是我的代码，有人有什么建议吗？

.buttonFirst {
  margin: auto;
  font-size: 4em;
  padding-top: 10%;
  color: #000;
  width: 90px;
  height: 90px;
  position: relative;
  z-index: 5;
  background: #dedede;
  border-radius: 2vw;
  outline: 2px;
  border: 2px;
  border-style: none;
}

.buttonFirst:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<button class="buttonFirst" id="1"></button>
<button class="buttonFirst" id="2"></button>
<button class="buttonFirst" …

我想在任何HTML元素或标签后面设置一个CSS背景,它应该有点偏移.

这是我正在寻找的结果:

您可以看到指向红色箭头的轻微背景,该背景在<h2>文本之前开始,在文本结束之前结束.此背景应随元素中的文本量扩展.

我试过用箱子阴影做这个,你可以在下面看到:

body {
  padding: 20px;
}
h2 {
  display: inline-block;
  box-shadow: -10px 10px 0 red;
}

<h2>Ain't No Mountain</h2>

但是你可以看到背景没有出现在文本背后.

让我知道是否有人做过这种事情:)