CSS 将 div 放在图片之上

Question

我正在尝试在我的 "header" 图片上移动 select。

问题是，当我 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

这就是 position:absolute 的目的：

#header {
position: relative;
}

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

并将#language 移到#header 中。

Answer 2

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

#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）。

CSS 将 div 放在图片之上

CSS placing div on top of image

html

css

css-float