Question

我在html代码中有3个级别的层次结构：

<section>
     <article>
          <div>

          </div>
     </article>
</section>

并且每个级别都有自己的背景：

section{
    background: #ffffff;
}

article{
    background: red;
}

div{
    background: /*????*/;
}

我怎样才能让div显示该部分的背景？ *出于示例目的，我们可以说每个都有预先定义的宽度和高度，并且它们都以一种方式位于另一个的顶部，div位于位于该部分的文章上

Answer 1

不确定我是否理解你，但阅读有关z-index

的信息

Answer 2

你可以给文章和div一个rgba背景并将alpha设置为0.这将使这两个分区的背景透明。例如：

HTML：

<section>
    <h1>section</h1>
     <article>
         <h1>article</h1>
          <div>
              <h1>div</h1>
          </div>
     </article>
</section>

的CSS：

section{
    background: rgba(255, 255, 255, 0);
    position: relative;
}

article{
    background: rgba(255,0,0, 0);
    position: absolute;
    top: 0;
    left: 0;
}

div{
    background: rgba(0,255,0, 0);
    position: absolute;
    top: 0;
    left: 0;
}

我不是专家。这也会隐藏这两个元素的背景。因此，如果您需要，您可以使用javascript在特定条件下更改值。我不知道这是否真正解决了你的目标，即覆盖层次结构。

Jsfiddle demo

如何给元素提供另一个元素的背景，这个元素在html层次结构中高出2级？

2 个答案: