将文本放在图像上以及下面的DIV

Question

我设法将div放在图像上，但之后的div和段重叠在图像上方。 Idealy我希望在图像之后拥有它。

http://jsfiddle.net/tp82y04n/

HTML code：

<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<div id="form"><input type="text" /></div>
</div>
<div id="main-content"><p>Test paragraph</p></div>

CSS样式：

div#container {
position: relative;
}
img#image {
position: absolute;
}
#form {
position: absolute;
top: 150px;
left: 100px;
}
#main-content p {
color: #fff;
}
#main-content{
overflow: hidden;
position:relative;
}

我想要这样的东西。

Answer 1

我在http://jsfiddle.net/ukv4chmg/1/

创建了相同的基本版本

基本上，我将input放在一个具有某种背景的单独部门中;并给main-content分区一个不同的区块。

HTML

<div id="image-container">

    <div id="form"><input type="text" /></div>

</div>

<div id="main-content"><p>this is a a test</p></div>

CSS：

#image-container {

    background: url(http://www.noao.edu/image_gallery/images/d4/androa.jpg);
    background-size: cover;
    padding: 6em 3em 6em 3em;

}

您可以调整padding和其他一些属性以获得所需的效果。 ：）

  

编辑：根据OP

您已为图片指定了absolute的属性。现在，您需要知道，当您为其赋予absolute属性时，它将从文档流中删除，不会被视为块级元素;因此，您可以选择非常精确的位置，而不是。

现在，既然您希望#main-content获得自己的文档块（流程），那么最好的选项（如许多优秀编码员所提到的）就是删除规则img#image ;通过这样做，你将获得你想要的效果。

这里的原因非常简单：您已从文档流中删除input，当您拥有图像时，它就像背景一样;现在，对于要在下一行（块）上的元素，需要为图像提供一个自己的块，以便后续元素在新块中呈现。

我希望这能解释答案！ ：）

Answer 2

从position: absolute移除img并将其display:block：

img#image {
   display: block; 
}

演示：