CSS placing div on top of image

Question

I am trying to move a select over my "header" image.

The problem is that when I float:left it obviously just sits right underneath the image. I have tried using margin and padding and neither seem to be helping me in this situation. What am I doing wrong?

The correct placement (red box):

The wrong placement where I have it right underneath the entire image:

This is my coding:

<div id="wrapper">

<div id="header">
    <img src="/images/placeholder_header.jpg" width="100%" height="215"/>
</div>
<div>
<select id="language" style="float:left;">
    <option value="">Select Language</option>
</select>
</div>

I have tried so many things but mostly:

#language { margin:5px;}

or padding or position:relative or z-index and so on...

Answer 1

There are few options, I'll just show two of them:

#language {
    margin-top: -30px; /*adjust this value as needed*/
}

Also try this if the above one didn't work for you:

#language {
    position: relative;
    top: -30px; /*adjust this value as needed*/
    z-index: 9999;
}

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Answer 2

This is the purpose of position:absolute :

#header {
position: relative;
}

#language {
position: absolute;
bottom: 0;
left: 0;
}

And move #language inside #header.