All geek questions in one place

Position element under another

I am not an expert web developer, so please carry me here.

I would like to display the banner style heading for the page with the top part occupied by the 275x116 image and then the horizontal menu bar (using ul elements) displayed 70% of the top of the banner.

How do I configure this so that the banner appears under my navigation? Currently, the left part of my menu bar is under the image, but I would like it to be the other way around, so the menu bar is above the image, something like this:

   ============= <start of header> ===========
   --------
   |  img   |
   |        |
   |      Horizontal menu 
   |        |
   --------
   ============= <end of header> ===========

My css:

#header
{
    background-color: green;        
    border: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;    
    height: 120px;
}

#logo
{
    background: green url(images/logo.png) no-repeat scroll 0 0;
    margin: 0px 0px;
    border: 1px solid white;    
    left: 20px;
    top: 20px;
    width: 275px;
    height: 116px;
    position: absolute; 
    z-index: -1000;
}

.container {
    border:1px solid grey;
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

My Html:

<body>

<div id="header">
   <div id="logo">
   </div>

   <div class="container" id="primaryNavbar">
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Books</a></li>
       <li><a href="#">Shows</a></li>
       <li><a href="#">Movies</a></li>
     </ul>                  

    <div class="clear">&nbsp;</div>                 

    </div> <!-- end of container -->

</div> <!-- end of header -->
</body>

I thought that setting the position “absolute” for the logo element and adding it to a very low z-index would lead to this, but here it is not.

Any suggestions?

+3
2

:

#header
{
    position: relative; //this will keep your absolute items inside of this container
}

#logo
{
    z-index: 1;
}

.container {
    z-index: 2;
    position: absolute;
}

.container ul li {
    float: left;
}
+4

.container , , .

0

Source: https://habr.com/ru/post/1737240/

More articles:


All Articles