使色带出现在矩形后面

Question

我正在尝试在矩形的开头创建一个色带。但是，我不知道如何让它出现在矩形后面。

请看这个代码笔：http://codepen.io/gosusheep/pen/aOqOBy

创建丝带并将其放在矩形后面的部分在这里：

.rectangle::before{
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: -1;
  border-left: 25px solid transparent;
  border-right: 25px solid $blue;
  border-top: 25px solid $blue;
  border-bottom: 25px solid $blue;
  left: -30px;
  top: 10%;
}

即使 position: absolute 和 z-index: -1，它也会出现在 div 的顶部。

有人可以帮忙吗？

Answer 1

你的问题的原因不是因为 children 不能放在他们的 parent 后面，而是因为你在 parent 上使用了 transform。使用变换会影响堆叠上下文，如 BoltClock 在 this answer 中提到的那样。

一个解决方案是完全避免 transform 并使用 left: calc(50% - 100px) 将功能区定位在中心（如以下代码片段所示）。 (50% - 100px) 被用作值，因为 100px 是框宽度的一半（50% 是 parent 的中心点）。

.rectangle {
  width: 200px;
  height: 50px;
  background-color: #8080ff;
  position: relative;
  left: calc(50% - 100px); /* newly added */
  border: 1px #6666ff solid;
}

ul {
  list-style: none;
}

li {
  display: inline;
}

li + li::before {
  content: " | ";
}

.container {
  width: 100%;
  position: relative;
}

.rectangle {
  width: 200px;
  height: 50px;
  background-color: #8080ff;
  position: relative;
  left: calc(50% - 100px); /* newly added */
  border: 1px #6666ff solid;
}

.rectangle::before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: -1;
  border-left: 25px solid transparent;
  border-right: 25px solid #8080ff;
  border-top: 25px solid #8080ff;
  border-bottom: 25px solid #8080ff;
  left: -30px;
  top: 10%;
}

<p>put a pipe between nav elements</p>
<nav>
  <ul>
    <li>banana</li>
    <li>woof</li>
    <li>quack</li>
  </ul>
</nav>
<p>Ribbon on the end of a rectangle</p>
<div class='container'>
  <div class='rectangle'></div>
</div>

如果您不能使用上述解决方案，那么您可以按照下面描述的方法进行操作。

假设 ::after pseudo-element 没有任何其他用途，您可以使用它来创建矩形并给它 z-index 高于 [=23] =] pseudo-element 使其出现在矩形后面。

/* Modified */

.rectangle {
  width: 200px;
  height: 50px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Added */

.rectangle::after {
  content: "";
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: block;
  position: absolute;
  background-color: #8080ff;
  border: 1px #6666ff solid;
  z-index: -1;
}

.rectangle{
  padding: 4px;
  box-sizing: border-box;
}

下面是一个示例片段：

ul {
  list-style: none;
}
li {
  display: inline;
}
li + li::before {
  content: " | ";
}
.container {
  width: 100%;
  position: relative;
}
.rectangle::before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: -2;
  border-left: 25px solid transparent;
  border-right: 25px solid #8080ff;
  border-top: 25px solid #8080ff;
  border-bottom: 25px solid #8080ff;
  left: -30px;
  top: 10%;
}

/* Modified */

.rectangle {
  width: 200px;
  height: 50px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Added */

.rectangle::after {
  content: "";
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: block;
  position: absolute;
  background-color: #8080ff;
  border: 1px #6666ff solid;
  z-index: -1;
}

.rectangle{
  padding: 4px;
  box-sizing: border-box;
}

<p>put a pipe between nav elements</p>
<nav>
  <ul>
    <li>banana</li>
    <li>woof</li>
    <li>quack</li>
  </ul>
</nav>
<p>Ribbon on the end of a rectangle</p>
<div class='container'>
  <div class='rectangle'>
    Some content
  </div>
</div>

Answer 2

这里的解决方案，仔细查看 z-indexes 和位置

.container{
  position: relative;
  width: 100%;
  z-index: 1;
}

.rectangle{
  width: 200px;
  height: 50px;
  background-color: $blue;
  position: absolute;
  left: 50%;
  border: 1px darken($blue,5%) solid;
}

.rectangle::after{
  content: "";
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid $blue;
  border-top: 25px solid $blue;
  border-bottom: 25px solid $blue;
  left: -30px;
  top: 10px;
  position: absolute;
  z-index: -1;
}

你的 codepen 编辑了 http://codepen.io/anon/pen/mJXeed 现在工作

Answer 3

显然，属性 transform: translateX(-50%); 在某种程度上是 "overriding" z-index。我的解决方案只是中心矩形，否则，例如：

.rectangle{
    margin: 0 auto;
}

DEMO

使色带出现在矩形后面

Make Ribbon Appear Behind Rectangle

css

css-shapes