Top in position relative 没有按预期工作

Question

Answer 1

使用容器

div

设置为

position: relative;

然后添加

position: absolute;

到img.

Answer 2

CSS:

html,body{
        height: 100%;
}

img{
        position: relative;
        top: 40%;
        float:left;
}

使用浮动：左；在 img 类中。这将解决问题，图像将显示在预期位置（距离屏幕顶部 40%）。

Answer 3

当该值以百分比形式提供时，它是相对于包含块的高度。

但是

img

没有包含块。你可以添加

position: absolute;

到img.

CSS：

img{
    position: absolute;
    top: 40%;
}

Answer 4

这可以帮助你... 我的建议是使用 px 而不是 %。它工作正常。

html,body{
    height: 100%;
}

img{
    position: relative;
    top: 40px;

}

Answer 5

为 p 标签添加 float:left

新的CSS，

html,body{
    height: 100%;
}

img{
    position: relative;
    top: 40%;
}
p {
    float:left
}