html - 样式 ="top:-90px;"什么都不做

标签 html css

我目前正在学习 html 和 CSS。我正在通过制作一个非常基本的网站来练习,但是当我在背景图片(twitter Logo )上添加另一张图片时遇到了问题。我尝试使用 style="top:-90px;" 移动图像,但没有效果。我曾经尝试移动图像的任何类(class)都没有发生。我也不知道如何通过 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>

最佳答案

top不对带有 position:static 的元素做任何事情(默认值)。你应该设置 position到:

  • position:relative将图像向上移动 90 像素
  • position:absolute移动图像,使其上边缘比其偏移容器的上边缘高出 90 像素(本例中为 <body>)
  • position:fixed将图像移动到视口(viewport)顶部上方 90 像素处。

在你的情况下,我很确定你想要 position:relative

关于html - 样式 ="top:-90px;"什么都不做,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22967249/

相关文章:

css - 我怎样才能在 CSS 中用堆叠的椭圆制作一个老式的目录?

html - IE8 CSS 背景颜色不工作

html - 将 flex 元素从一列元素内部移动到它自己的列

php - 如何删除已弃用的错误

jquery - 单击输入并输入文本时更改 div 换行的 css

java - 如何通过 CSS 添加外部图像

jquery - 具有动态高度的简单内容 slider

javascript - 更新 onchange 上显示的价格

html - CSS Order Issue - 真正的逻辑是什么?

javascript - 我如何知道用户正在浏览网页的哪一部分?