html - 如何在不影响左侧文本的情况下更改图像的位置？

Question

代码：

<div class="container_bottom_tip">
    <div class="container_bottom_desc">This is some text
        <img class="browser_button_img" src="images/something.png">
    </div>
</div>

---

.container_bottom_tip {
    text-align: center;
}
.container_bottom_desc {
    color: #333;
}

使用上面的代码，我想将图像向上移动一点。因此，当我在图像上执行诸如 margin-top 之类的操作时，它会拖动文本“这是一些文本”。

我可以做些什么来向上或向下移动图像而不影响文本的定位“这是一些文本？”

Answer 1

您可以使用位置：相对

然后你可以通过改变css的“top”属性来调整图像的位置。这将在不影响父 div 的情况下移动它。

http://jsfiddle.net/MCJhs/

.container_bottom_tip {
    text-align: center;
}
.container_bottom_desc {
    color: #333;
}
.browser_button_img{
    position: relative;
    top: 30px;
}

Answer 2

你可以这样做：

.browser_button_img
{
    position: relative;
    top: -10px;
}

相对定位将允许您相对于它本来应该在的位置移动元素，而不会影响其他元素的回流。与绝对定位不同，relative 允许您保持元素占用的正常空间。