将图像放在右边而不影响布局

Question

我试图在右边插入一张图片，而不会影响中间的文字。我尝试使用z-index将图片放在前面，希望它不会影响下面的布局。但实际上，文本“页脚”不再出现在屏幕中心了。

    <div style="z-index:99;display:inline-block;float:right">
        <img src="https://www.xing.com/img/custom/events/events_files/e/6/3/765539/square96/Apfel_klein.jpg?1443451610">
    </div>

    <p align="center">footer</p>
    <p align="center">footer</p>

这是页面开头的方式： https://jsfiddle.net/eucysjp6/

这是在我尝试插入图片之后： https://jsfiddle.net/eucysjp6/1/

Answer 1

您可以绝对定位图像，相对地将图像放在右下角而不影响文本：

<强> jsFiddle example

img {
    position:absolute;
    bottom:0;
    right:0;
}
table {
    position:relative;
}