CODEWITHSUNDEEP
csspositioning
Michiel
Michiel

Reputation: 8083

Position item on top

I'm having a little bit of issues with the placing of objects on my site...

All I want is to place the coloured items ùnder the main container. So the navigation_groups div should be placed under the main_container.

<div class="navigation_groups">
     // Navigation              
</div>
<div class="main_container">
    <div class="main_container_top"></div>
    <div class="main_container_middle"></div>
    <div class="main_container_bottom"></div>
</div>

I've tried to play with position, but for some reason, if I add a absolute or relative property, the links in de navigation_groups disappear... How can I solve this?

The z-index property didn't work either...

Upvotes: 1

Views: 101

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195962

The problem is that when you put the menu on the back, it become non-responsive since the content div completely covers the menu space..

You need to re-style your elements a bit differently..

.main_container {
    margin: -90px 0 0 132px;
    position: relative;
}

.main_container_top {
    /*whatever you have but change the positioning of the background image to*/
    background-position: 0 10px;
}

.main_container_middle {
    /*whatever you have but change the positioning of the background image to*/
    background-position: 0 10px;
    /*and the padding to*/
    padding: 30px 0 30px 56px;
}

.main_container_bottom {
    /*whatever you have but change the positioning of the background image to*/
    background-position: -7px 0;
}

.navigation_groups {
    /*change the following to*/
    position: relative;
    z-index:0;
}

what we actually did, besides removing the negative z-index is push the element 124px to the right and fix all affected elements by correcting their padding and background-positioning by the same amount..

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

When using position:absolute, you need to declare position:relative on a parent item to provide a zero-point of reference for the positioning, otherwise you end up using the BODY as a reference point.

Without seeing your CSS it's hard to troubleshoot your issue.

Upvotes: 0

Related Questions