Place one div on top of the other div using CSS

Question

I have a sign in button as shown below and when I try to click that the menu opens in which I am having an ASP.Net login control which is shown below my slider and not above it.So I would like to position it on top of my slider.And between my slider and sign in button I have menu bar.

So how do I do that?

enter image description here

I have followed this question on SO but did not succeed

This is my CSS:

#container {
    width:780px;
    margin:0 auto;
    position: relative;
}
#topnavsignin {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
    margin-top:-60px;
    margin-left:120px;
}
#topnavsignin a.signin { 
    background:#88bbd4;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url('../images/signin-nav-bg-ie.png') no-repeat 0 0;
    *padding:4px 12px 6px;
    margin-left:420px;

 }
#signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
    background-color:#ddeef6;
    position:absolute;
    width:350px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    top: 24.5px; 
    right: 171px; 
    margin-top:-55px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#789;
    font-size:11px;
    padding: 5px;

}

This is how I'm showing it:

<div id="container">
   <fieldset id="signin_menu">
    //Asp.Net Login Control
    </fieldset>
</div>

//Here goes my Navigation menu

This is my slider part

<div id="slider_wrap">
            <div id="wowslider-container1">
            </div>
 </div>

Aristos · Accepted Answer · 2013-05-07T17:01:47.953

To position one Div over the other you use the z-index on the css, together with position: absolute or relative or fixed

Some examples:

http://www.w3schools.com/cssref/pr_pos_z-index.asp

http://www.w3schools.com/css/css_positioning.asp

On the container that you like to be front set a bigger z-index than the containers that you like to be on back.

Note that: the z-index works only for position: absolute, relative, or fixed, and the divs that you like to control have this attributes. The example that you mention try to fix order of divs with out having one of this attributes (or with out using the z-index), so in example can not use z-index and its a tricky how to place one in front of other with out the z-index enabled.

As I see you do not have set index in one of them.

@Aristos-it worked perfectly well.Thanks for your links.Z-index is a gud idea!.:) — coder, Jan 14 '12 at 12:11

score 1 · Answer 2 · edited Oct 29 '12 at 00:40

On the container that you like to be front set a bigger z-index than the containers that you like to be on back.

Note that: the z-index works only with position: absolute/relative/fixed; on the same element. The example that you mention try to fix order of divs without having one of this properties (or without using z-index); it is not possible to place one element in front of other without defining z-index together with position.

Place one div on top of the other div using CSS

2 Answers2