将文字与跟随DIV一起放置在图像上

Question

我设法在图片上放置了div，但是之后的div和段落在图片上方重叠了。 理想情况下，我想在图像后使用它。

http://jsfiddle.net/tp82y04n/

HTML代码：

<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

从img移除position: absolute ，并给它display:block ：

img#image {
   display: block; 
}

演示：

https://jsfiddle.net/tp82y04n/1/