具有伪类的全宽背景元素 - z-index? [英] Full width background element with pseudo-class - z-index?

问题描述

我发现当我删除父元素的 z-index 时它可以工作.无论如何......有没有一种不那么hackish"的方式来完成这一切?它有效，但真的感觉很hackish.

我尝试在居中的 50% 行后面制作一个全宽伪元素.它工作正常(尽管代码看起来很hackish)但我无法在其父元素后面获取伪元素 z-index :

> 在这里访问 codepen-battleground.

这是 SCSS 代码:

html, body {高度:100%；边距:0；溢出-x:隐藏；溢出-y:自动；}.内容 {背景颜色:蓝色；左边距:自动；右边距:自动；位置:相对；宽度:50%；z-索引:1；填充:2em；&:在{之后内容: "";显示:块；高度:100%；左:-50vw；不透明度:.7；位置:绝对；右:0vw；顶部:0；宽度:200vw；z-索引:-1；边框:10px纯绿色；box-sizing: 边框框；背景色:番茄；}}

有什么技巧可以做到这一点吗?我很乐意让这个工作.

解决方案

如果您删除父级上的 z-index，它会起作用.

我还更改了居中解决方案，以便可以移除主体上的溢出滚动.

html, body {高度:100%；边距:0；}.内容 {背景颜色:蓝色；边距:0 自动；位置:相对；宽度:50%；填充:2em；}.内容:{内容: "";显示:块；位置:绝对；左:50%；顶部:0；高度:100%；宽度:100vw；变换:translateX(-50%);z-索引:-1；不透明度:.7；box-sizing: 边框框；背景色:番茄；}

<strong>这应该放在前面，所以它是 <em>blue</em>不是淡紫色- Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren，无海 takimata sanctus est Lorem ipsum dolor 坐 amet.

EDIT: I found out that when I delete the z-index of the parent element it works. Anyway ... is there a less "hackish" way to accomplish all that? It works but really feels very hackish.

I try to make a full width pseudo element behind a centered 50% row. It works fine (code looks very hackish, though) but I can't get the pseudo elements z-index behind its parent:

> Visit codepen-battleground here.

This is the SCSS code:

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.content {
  background-color: blue;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 50%;
  z-index: 1;
  padding: 2em;

  &:after {
        content: "";
        display: block;
        height: 100%;
        left: -50vw;
        opacity: .7;
        position: absolute;
        right: 0vw;
        top: 0;
        width: 200vw;
        z-index: -1;
        border: 10px solid green;
        box-sizing: border-box;
        background-color: tomato;
    }
}

Is there a trick to do this? I'd love to get this working.

解决方案

If you remove z-index on the parent it works.

I also changed the centering solution so the overflow scroll on the body can be removed.

html, body {
  height: 100%;
  margin: 0;
}
.content {
  background-color: blue;
  margin: 0 auto;
  position: relative;
  width: 50%;
  padding: 2em;
}
.content:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  opacity: .7;
  box-sizing: border-box;
  background-color: tomato;
}

<div class="content">
  <strong>This should go to front so it's <em>blue</em> not lilac</strong> - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

这篇关于具有伪类的全宽背景元素 - z-index?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！