Question

我有一个问题，我有多个元素匹配背景图像的位置。当窗口大小改变时（特别是非常小），元素的“顶部”值不会保持不变。这个小问题累积起来，10个元素后来一切都完全错了。使用窗口大小（尝试使其非常小）来轻松查看问题。

如何解决此问题并使其始终与背景相匹配？

<!DOCTYPE html>
    <html>
    <head>
        <style>
            html, body {
                margin: 0;
            }
    
            div {
                min-width: 100%;
                min-height: 100%;  
                background-image: url("https://i.imgur.com/EX2L8y6.jpg");
                background-size: 100%, 100%;
                background-repeat: no-repeat;
                position: absolute;
            }
    
            .TheBtn {
                position: relative;
                background-color: red;
                opacity: 0.5;
                height: 4.4vw;
                width: 22.2vw;
                left: 19vw;
                top: 10.8vw;
            }
        </style>
    </head>
    <body>
        <div>
            <button class="TheBtn"></button>
        </div>
    </body>
    </html>

Answer 1

将元素设置为relative时，意味着所有子元素都与该父元素相关。 .TheBtn设置为相对但没有子元素。你需要将div设置为relative为.TheBtn是div的子节点，.TheBtn的位置相对于最近的相对父元素（div）是绝对的。这是我用来测试的代码：

＆＃13;

html,body {
  margin: 0;
}

div {
  min-width: 100%;
  min-height: 100vh;
  background-image: url("https://i.imgur.com/EX2L8y6.jpg");
  background-size: 100%, 100%;
  background-repeat: no-repeat;
  position: relative;
}

.TheBtn {
  position: absolute;
  background-color: red;
  opacity: 0.5;
  height: 4.4vw;
  width: 22.2vw;
  left: 19vw;
  top: 10.8vw;
}

＆＃13;

<body>
    <div>
        <button class="TheBtn"></button>
    </div>
</body>

＆＃13;

我还用于测试目的将div的最小高度更改为100vh，这样它将跨越屏幕的整个高度。

CSS顶部相对于屏幕

1 个答案: