Question

我目前正在学习HTML和CSS。我通过创建一个非常基本的网站来练习，但是当我在我的背景图像（twitter徽标）上添加了另一个图像时遇到了一个问题。我尝试使用style="top:-90px;"移动图像，但没有效果。曾经尝试移动图像的任何课程都没有发生。我也不知道如何通过CSS定位图像。

请帮助，抱歉，我知之甚少，因为我正在努力学习。

<!DOCTYPE html>
<head>
<style>
    body {
        text-align: center;
        background: url("LINK");
        background-size: cover;
        color: white;
        font-family: sans-serif;
        background-repeat: no-repeat;
        background-attachment: fixed;
        font-weight: lighter;
    }

    p {
        text-align: center;
        font-size: 24px;
        font-family: sans-serif;
    }



</style>
</head>





<body>
<a href="http://www.google.com"><img src="http://www.scottish.parliament.uk/images/Logos%20and%20graphics/TwitterLogoSmall20120927.gif" height="50" width="50" style="top:-90px;"></a>

<p>Hello!</p>
</body>

Answer 1

top对position:static（默认值）的元素不执行任何操作。您应该将position设置为：

position:relative将图片向上移动90像素
position:absolute移动图片，使其上边缘位于偏移容器顶边上方90像素（在本例中为<body>）
position:fixed将图像移动到视频顶部上方90像素处。

在您的情况下，我非常确定您需要position:relative

Answer 2

top适用于position: absolute。

也许你想设置

margin-top: value;

Answer 3

如果您是html和css的新手，那么我建议您放置图片和链接
<a href="xyz"><img src="xyz"/></a>
div内部（如果你没有使用html5），就像这样

<div id="myImage">
<a href="xyz"><img src="xyz"/></a>
</div>

然后在你的CSS中使用

#myImage {
position:relative;
top:-90px

Answer 4

<a href="http://www.google.com"><img src="http://www.scottish.parliament.uk/images/Logos%20and%20graphics/TwitterLogoSmall20120927.gif" height="50" width="50" style="top:-90px; position:relative;"></a>

复制并将其粘贴到您的文件中。

Answer 5

你可以做风格：

#image{     
    margin-top:90px
}

in html

<div id="image"><img src...........>

这是一个例子，但它可以正常工作

风格=＆＃34;顶部：-90px;＆＃34;什么也不做

5 个答案: