Home/ Questions/Q 5974675
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T20:58:32+00:00

My code looks like this: css: .top { position: absolute; top:0; left:0; height: 1600px;

  • 0

My code looks like this:

css:

.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
z-index: -100;

}

.bar {
position: relative;
z-index: -200;
width: 100%
height: 100px;

}

.inner-bar {
position: relative;
z-index: 100;
width: 100%
height: 50px;

}



html:

<body>
<div class="top">some content</div>

<div class="bar"> 
  <div class="inner-bar">some content</div>
<div>

</body>

As you can see I am trying to make inner-bar appear in front but this does not work. Once I set bar to be behind of everything ( which works) this also sets inner-bar to be behind of everything no mater what styling I do for inner-bar. My layout requires that inner-bar must be a child of bar. So is there a solution and what it is?

To make it clear my objective is to make bar behind top (content in top appears on bar) and to make top behind inner-bar ( content in top is hidden if it overlaps inner-bar so that the links in inner-bar are active).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    first off there is an error in the html you posted:

    <body>
    <div class="top">some content</div>
    <div class="bar"> 
      <div class="inner-bar">some content</div>
    </div>
</body>

    you didn’t close the last div 🙂

    as for the rest:

    here you go good sir! http://jsfiddle.net/8AJnD/31/

    .top {
    position: absolute;
    top:0;
    left:0;
    height: 1600px;
    width: 100%;
    top:0;left:0;z-index:0;
}

.bar {
    position: absolute;z-index:-1;
    width: 100%;
    height: 100px;top:0;left:0
}

.inner-bar {
    position: absolute;
    z-index:-2;
    width: 100%
    height: 50px;top:0;left:0
}

    Use absolute instead of relative and make the parent relative to be able to position the elements however you want them to be positioned

    • 0