css - 如何使用CSS将图像固定在文本之上

Question

我不确定如何解决这个问题..

http://jsfiddle.net/PaDvr/

我希望图像放在文本之前，而不是在文本之上。

html:

<div id="photo">
<img style="-webkit-user-select: none" src="http://cdn.androidpolice.com/wp-content/themes/ap1/images/android1.png">
</div>
<div id="text" class="media-body">
    lorem ipsum bla blah...
    </div>​

CSS:

#photo{
    border: 1px solid black;
    max-width: 100px;
    max-height: 200px;
    min-width: 266px;
    min-height: 286px;
    position: relative;
    left: 32%;
    top: 23px;
}​

是什么导致图像位于文本之上？

Answer 1

这里有两个问题。首先是您的最大和最小宽度和高度设置。 div 的最大高度应至少与图像一样高，并且高于最小高度。 See it here

#photo {
  ...
  max-height: 404px;
} 

第二个是您的 relative 定位将其从常规文档流中移除。 relative 定位的本质是将其向下移动 23px 使其在其下方的任何位置上方移动 23px。一种抵消这种情况的方法是在图像中添加一个底部边距，该边距等于您的相对偏移量。 View on JSFiddle

#photo {
  position: relative;
  left: 32%;
  top: 23px;
  margin-bottom: 23px;
} 

不过，如果您只是想上下移动图像，我只会使用边距而不是相对定位。 View on JSFiddle

#photo{
  ...
  margin-left: 32%;
  margin-top: 23px;
}​