CODEWITHSUNDEEP
htmlcss
Al.s
Al.s

Reputation: 310

how to give element the background of another element which is 2 levels higher in the html hierarchy??

i have 3 levels hierarchy in html code:

<section>
     <article>
          <div>

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

and each levels has its own background :

section{
    background: #ffffff;
}

article{
    background: red;
}

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

how can i get the div show the background of the section?? *for the example purposes lets say they each have pre-defined width and height and they all located one on top of the other in a way the div sits on the article which sits on the section

Upvotes: 1

Views: 67

Answers (2)

davidrynn
davidrynn

Reputation: 2376

You could give article and div an rgba background and set alpha to 0. This would make the backgrounds for those two divisions transparent. For example:

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;
}

I'm no expert though. Also this would hide the background of those two elements. So if you needed to you could use javascript to change the values under certain conditions. I don't know if this really addresses what your going for, which is to over-ride the hierarchy.

Jsfiddle demo

Upvotes: 0

Igor Ivancha
Igor Ivancha

Reputation: 3451

not sure whether I understood you, but read about z-index

Upvotes: 1

Related Questions