Question

问题是我的图像位于文本之上。我想要的是文本躲避图像，图像隐藏的文本采用不同的行。怎么可能？

以下是我的CSS

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
  overflow: hidden;
  display: inline-block;
}

div.absolute {
  position: absolute;
  top: 20px;
  right: -90px;
  width: 200px;
  display: inline-block;
  border: 3px solid #73AD21;
}

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
  overflow: hidden;
  display: inline-block;
}
div.absolute {
  position: absolute;
  top: 20px;
  right: -90px;
  width: 200px;
  display: inline-block;
  border: 3px solid #73AD21;
}

<div class="relative">This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element
  has position: relative; This div element has position: relative;
  <div class="absolute">
    <img src="http://localhost:20162/images/logo.png" />
  </div>
</div>

JS Fiddle处的问题再现。

Answer 1

对于位于absolute的div，这不起作用。应为relative，并且文本可以float。然后，您可以将div放在要包含它的文本中。

所以也许这对你好吗？

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
    overflow: hidden;
    display: inline-block;
}
div.absolute {
    position: relative;
    float:right;
    width: 200px;
    margin-right:-90px;
    display:inline-block;
    border: 3px solid #73AD21;
}

<div class="relative">This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position:<div class="absolute"><img src="http://localhost:20162/images/logo.png"/></div> relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;
</div>

https://jsfiddle.net/gs5y0ewz/1/

如果确切位置很重要，并且您不想在添加或删除文本时移动图像，那么您一定应该选择GCyrillus的答案。

Answer 2

如果您希望它与其他内容互动，您应该将其保留在流程中。

float将为您执行此操作，但它需要在流程中提前浮动元素。

可以使用额外的元素或伪降低20px的元素。例如：

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
  overflow: hidden;
  display: inline-block;
}
.relative:before {
  content: '';
  float: left;
  height: 20px;/* + prepare mimic top:20px */
}
div.absolute {
  float: right;
  clear: left;/* do the mimic top:20px */
  width: 200px;
  margin-right:-90px;/* mimic right:-90px */
  display: inline-block;
  border: 3px solid #73AD21;
}

<div class="relative">
  <div class="absolute">
    <img src="http://localhost:20162/images/logo.png" />
  </div>
  This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element
  has position: relative;This div element has position: relative;

</div>

编辑：jsfiddle going along

Answer 3

问题在于position: absolute; 具有绝对位置的元素可以放置在页面的任何位置，甚至可以放在其他元素的顶部。你应该通过改变

来移动它

right:-90px;
width: 200px;

或通过更改position属性。

图片隐藏文字，它应该采用不同的行

3 个答案: