html - CSS 将 div 置于图像之上

Question

我正在尝试在我的“标题”图像上移动一个选择。

问题是，当我 float:left 时，它显然就位于图像的正下方。我尝试过使用边距和填充，但在这种情况下似乎都没有帮助我。我做错了什么？

正确的位置(红框):

错误的位置，我把它放在整张图片的正下方:

这是我的代码:

<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>

我尝试了很多东西，但主要是:

#language { margin:5px;}

或padding或position:relative或z-index等...

Answer 1

选项很少，我只展示其中两个:

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

如果上面的方法不适合你，也可以试试这个:

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

注意:z-index 仅适用于定位元素(position:absolute、position:relative 或 position:fixed)。