Question

当标记<img>与<img>同级时，为什么<p>的顶级属性不起作用，但如果删除标记<p>，则可行。

CSS：

html,body{
        height: 100%;
}

img{
        position: relative;
        top: 40%;

}

HTML：

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Position</title>
    <link rel="stylesheet" href="position.css">
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus delectus accusantium nulla eveniet aperiam, quo odit qui voluptas. Illo vel sed ex dolores illum eum architecto a libero atque. Voluptatibus.</p>
    <img src="http://lorempixel.com/400/200/" alt="">
</body>
</html>

非常感谢。

Answer 1

http://jsfiddle.net/9bxwxfe2/

使用设置为div的容器position: relative;，然后将position: absolute;添加到img。

Answer 2

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

html,body{
    height: 100%;
}

img{
    position: relative;
    top: 40px;

}

https://jsfiddle.net/vy301c07/

Answer 3

为p标签添加了float：left

新css，

html,body{
    height: 100%;
}

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

See jsfiddle

Answer 4

CSS:

html,body{
        height: 100%;
}

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

使用float：left;在img类中。这将解决问题，图像将显示在预期位置（距离屏幕顶部40％）。

Answer 5

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

但是img没有包含块。您可以将position: absolute;添加到img中。

CSS：

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

最高位置相对不起作用

5 个答案: