Question

我有一个现有的div。我想在这个div上添加一些小图像图标（比如问号png图标），但是我会将它直接漂浮在div角上方（但仍然在div区域内），位于以下任一位置：

右上左上方左下方右下

一个条件是它永远不会改变现有的div（布局，边距，样式等没有变化）。图标只会漂浮在它们上面。我试图使用padding-left属性到图像，但它破坏了现有div的布局。即使图标浮在它们上面，我也希望它们保持不变。有没有一种简单的方法可以使用jQuery或CSS？

感谢您分享提示。

Answer 1

您可以尝试：

的 HTML 的

<div class="target" style="position:relative;height:200px;width:200px;background: #ccc;margin: 25px"> Target div </div>

的的jQuery 的

$('.target').append('<img src="http://www3.emersonprocess.com/rosemount/wirelessestimator/App_Themes/Basic/images/questionmark_icon.gif" style="position:absolute; top: -20px; right: -12px">');

的 DEMO 的

Answer 2

要制作你想要的东西，你可以使用CSS。假设你的4s在div中，你可以用两种方式做到：

在DIV上放置一个CSS样式位置：relative，并在每个位置放置绝对值。然后，对于每个，您可以使用CSS位置规则，如顶部，底部，左侧，右侧来放置您的元素

示例：

<div style="position: relative; width: 100px; height: 100px">
    <img src="your_file" style="position: absolute; left: 0; top: 0; width: 10px; height: 10px;">
    ....other <img> with different position...
</div>

使用你的s上的浮动CSS attribut（左，右）将它们放在。的每个角落。

如何使用jQuery在现有div上浮动图标

2 个答案: