Question

我只是想知道如何使用绝对定位在上方显示图像。注意：图像没有定义高度，可以更长或更短。目标是在使用绝对定位上方显示图像。

<div id="wrap">
    <p>Hello</p>
</div>

<script>
    //Display an image above the <p/> using absolute positioning.
        //Note: the image has no define height, it could be longer or shorter. The goal is to 
         display the image above the <p/> using absolute positioning.
</script>

Answer 1

如果您希望<img>高于，是否有理由不能执行以下操作？

<div id="wrap">
    <img src="path/to/img">
    <p>Hello</p>
</div>

我强烈推荐这种方法，因为图像的高度或宽度不会破坏任何东西，会根据它的大小移动。

但我们假设<img>在其他地方，就像在它下面一样：

<div id="wrap">
    <p>Hello</p>
    <img src="path/to/img">
</div>

您可以添加以下CSS：

img {
    position: relative:
    top: -25px;
}

这不是一件好事，因为它实际上只是将图像移动了25个像素。如果段落的大小发生变化怎么办？如果您在段落上方添加更多内容会怎样？

您也可以尝试：

img {
    position: fixed;
    top: 0;
}

这会将图像始终放在视口的顶部。再次，使用这些position方法中的任何一个都会出现很多问题（除非它是您想要的），我建议使用纯HTML，并避免CSS位置修复。

Answer 2

我认为没有聪明的方法可以做到这一点...为什么不是$（＆＃34; #wrap＆＃34;）。之前（＆＃34; image＆＃34;）;没有绝对的位置？

Answer 3

如果你的意思是隐藏，你可以去：

<强>标记

<div class="wrapper">
  <p>I will be hidden soon.</p>
</div>

<强> CSS

.wrapper img{
  position:absolute;
  top: 0;
}

<强> JS

$('.wrapper').append($('<img>', { src : 'http://placehold.it/350x150'}));

See fiddle

使用绝对定位在内容上方显示图像

3 个答案: