CSS顶部相对于屏幕 [英] CSS Top Relative To Screen
问题描述
我有一个问题，我有多个元素与背景图像的位置相匹配。当窗口大小改变时（特别是非常小），元素的顶部值不会保持不变。这个小问题累积起来，10个元素后来一切都完全错了。玩弄窗口大小（尝试使它非常小），以便轻松看到问题。
我该如何解决这个问题并始终保持它们与背景相匹配？
<！DOCTYPE html> < HTML> < HEAD> <风格> html，body {margin：0; } div {min-width：100％;最小高度：100％; background-image：url（https://i.imgur.com/EX2L8y6.jpg）;背景大小：100％，100％;背景重复：不重复;位置：绝对; }.TheBtn {position：relative;背景颜色：红色;不透明度：0.5;身高：4.4vw;宽度：22.2vw;左：19vw;上：10.8vw; }< / style> < /头> <身体GT; < DIV> < button class =TheBtn>< / button> < / DIV> < /体> < / html>
将元素设置为相对时，意味着所有子元素都与该父元素相关。 .TheBtn设置为相对但没有子元素。您需要将div设置为relative .Btn是div的孩子，并且.Btn的位置将相对于最近的相对父元素（div）是绝对的。这是我用来测试的代码：
< body> < DIV> < button class =TheBtn>< / button> < / div>< / body>
出于测试目的，将div的最小高度改为100vh，这样它将跨越屏幕的整个高度。
I have a problem where I have multiple elements that match the background image's position. When the window size is changed(especially going very small) then the elements' "top" values don't stay constant. This small issue builds up and 10 elements later everything is totally wrong. Play around with the window size (try making it very small) to easily see the problem.
How can I fix this problem and keep them matching the background all the time?
<!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>
When you set an element to relative it means that all of the child elements are relative to that parent. .TheBtn is set to relative but has no child elements. You need to set the div to relative as .TheBtn is a child of div, and the positioning of .TheBtn will be absolute in relation to the nearest parent element that is relative(the div). Here is the code I used to test:
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;
}
<body>
<div>
<button class="TheBtn"></button>
</div>
</body>
I have also for testing purposes changed the min-height of the div to 100vh, that way it will span the whole height of the screen.
这篇关于CSS顶部相对于屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
