0

I have this HTML code:

<div id="logo">
    <div id="left-block">
        <h1>Title goes here</h1>
    </div>
</div>
<div id="right-block">
    <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
    </ul>
</div>

It shows a title at the top-left corner and a item menu at the top right using this CSS code:

#logo {
    position: absolute;
    z-index: 1;
}

#left-block {
    background-color: red;
    height: 50px;
}

#right-block {
    float: right;
    background-color: blue;
    height: 50px;
    z-index: 5;
}

ul {
    float: right;
    list-style: none;
}

li {
    display: inline;
    margin: 0 5px 0 0px;
}

The problem is when I have a long title as showed in this Fiddle example. The title overlaps the menu and z-index seems that is not working (I've put z-index everywhere without success). Why z-index is not working? Is because #logo is absolutely positioned? How to resolve this problem?

NOTE: I can't change this (#logo {position:absolute}) because other elements not showed in this simplified demo needs it.

Ivan
  • 14,692
  • 17
  • 59
  • 96
  • 2
    `#right-block` is not positioned absolute or relative. See the docs: http://www.w3.org/wiki/CSS/Properties/z-index. – Felix Kling Feb 12 '13 at 12:38
  • 1
    @FelixKling that is actually the right answer, if you post it i'll upvote it. `z-index` only works within the context of a relative/fixed or absolute position. – Andres I Perez Feb 12 '13 at 12:41
  • possible duplicate of [Why does z-index not work?](http://stackoverflow.com/questions/9191803/why-does-z-index-not-work) – Felix Kling Feb 12 '13 at 12:42

2 Answers2

2

Just manually set the #right-block position :

#right-block {
    position: relative;
    float: right;
    background-color: blue;
    height: 50px;
    z-index: 5;
}

z-index only woks on absolute|relative|fixed positioned elements, and the default value is for position is static.

zessx
  • 68,042
  • 28
  • 135
  • 158
0

I think you have some max height/width, so just write some CSS to #logo

#logo {
    position: absolute;
    z-index: 1;
    width: 100px; /* your maximum in width */
    height: 100px; /* your maximum in height */
    overflow: hidden; /* just to make sure there is nothing leaking your DIV */
}
Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
FibreFoX
  • 2,858
  • 1
  • 19
  • 41