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 - 具有固定长度和高度的 Angular Bootstrap 卡。有没有办法减少代码?

javascript - onclick 函数防止平滑滚动

javascript - 未捕获的语法错误 : Unexpected number

javascript - 动态插入的脚本标签未按正确顺序执行

html - 带箭头格式的 Div/Li(面包屑)

html - 如何为多个设备显示图像?

html - HTML <small> 标签如何影响 CSS line-height 属性?

html - 将鼠标悬停在将在另一个元素中生效的元素上

java - Velocity:如何部分解析html模板?

javascript - 使用 jQuery 单击悬停时的工具提示