CODEWITHSUNDEEP
cssz-index
Robert Kazik
Robert Kazik

Reputation: 13

css: z-index and float-right

I'm trying to lay my menu div onto facebook share div. The main problem is,that z-index doesn't work,even when i use position:relative on both div. Do You know,how i may to fix it? P.S I added photo where You can see,what exactly goes wrong

http://img4.imageshack.us/img4/1563/problemscreenshot.png

       <div id="facebook_connect">
                    <a href="something,something,something-thedarkside">
                        <img src="/img/facebook_connect.png"/>
                    </a>
                </div>
                <div id="header_menu">
                    <ul>
                        <li class="menu_link_left highlight"><a href="<?php echo $this->url(array(), 'index') ?>">Strona główna</a></li>
                        <li class="menu_link_inside"><a href="<?php echo $this->url(array(), 'onas') ?>">O nas</a></li>
                        <li class="menu_link_inside"><a href="<?php echo $this->url(array(), 'uslugi') ?>">Usługi</a></li>
                        <li class="menu_link_right"><a href="<?php echo $this->url(array(), 'kontakt') ?>">Kontakt</a></li>
                    </ul>
                </div>

and CSS code:

#facebook_connect{
    height:50px;
    width:20px;
    top:30px;
    position:relative;
    z-index:1;
    float:right;
}
#facebook_connect a, img{
    position:relative;
    z-index:1;
}

/*=======================================*/

#header_menu{
    position:relative;
    z-index:2;
    height:30px;
    width:350px;
    background:#ececec;
    border-radius:5px;
    float:right;
    top:60px;
    -moz-box-shadow: 0px 0px 6px #000;
    -webkit-box-shadow: 0px 0px 6px #000;
    box-shadow: 0px 0px 6px #000;
}

Upvotes: 1

Views: 6970

Answers (1)

Cody Moncur
Cody Moncur

Reputation: 337

So, if I'm not mistaken, what you're trying to accomplish is having your Facebook share button underneath your navigation, and I'm assuming you want it to protrude a bit from the top, giving it a somewhat layered effect.

If this is the case, the issue is not with the z-index, it is a positioning issue. You can correct this by placing the two divs within a container. Try this:

HTML:

<div id="cont">

<div id="header_menu">
    <ul>
        <li class="menu_link_left highlight"><a href="<?php echo $this->url(array(), 'index') ?>">Strona główna</a></li>
        <li class="menu_link_inside"><a href="<?php echo $this->url(array(), 'onas') ?>">O nas</a></li>
        <li class="menu_link_inside"><a href="<?php echo $this->url(array(), 'uslugi') ?>">Usługi</a></li>
        <li class="menu_link_right"><a href="<?php echo $this->url(array(), 'kontakt') ?>">Kontakt</a></li>
    </ul>
</div>
<div id="facebook_connect">
    <a href="something,something,something-thedarkside">
        <img src="/img/facebook_connect.png"/>
    </a>
</div>

</div>

CSS:

#cont {
  position: relative;
  top:60px;
  float:right;
}

#facebook_connect{
  position:absolute;
  top: 5px;
  right: 20px;
  height:50px;
  width:20px;
  z-index:1;
}

#header_menu{
  position: relative;
  height:30px;
  width:350px;
  background:#ececec;
  border-radius:5px;
  -moz-box-shadow: 0px 0px 6px #000;
  -webkit-box-shadow: 0px 0px 6px #000;
  box-shadow: 0px 0px 6px #000;
  z-index:2;
}

Then position as you see fit.

Upvotes: 4

Related Questions