gpt4 book ai didi

HTML Css 位置不起作用

转载 作者:行者123 更新时间:2023-11-28 02:09:02 26 4
gpt4 key购买 nike

为什么在调整窗口大小时我的按钮没有停留在正确的位置?据我所知,它应该可以工作。

在我之前的帖子中,我想出了如何正确定位调整窗口大小的东西(CSS Top Relative To Screen),但是使用两个 div 似乎不起作用。

html, body {
margin: 0;
}

.Div1 {
background-image: url("https://imgur.com/7NQ3IOt.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;

position: relative;
height: 76.1vw;
}

.Div2 {
background-image: url("https://imgur.com/CjVMSqG.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;

position: relative;
height: 169vw;
}

.Btns {
position: absolute;
font-size: 2.1vw;
left: 16.5vw;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="Div1">
<button class="Btns" style="margin-top: 4.8%">Button 1</button>
</div>
<div class="Div2">
<button class="Btns" style="margin-top: 4%">Button 2</button>
</div>
</body>
</html>

最佳答案

更新:

嘿,如果这对你有用,请告诉我:

html, body {
margin: 0;
}

.Div1 {
background-image: url("http://imgur.com/7NQ3IOt.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;

position: relative;
height: 76.1vw;
}

.Div2 {
background-image: url("http://imgur.com/CjVMSqG.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;

position: relative;
height: 169vw;
}

.Btns {
position: absolute;
font-size: 2.1vw;
left: 17.8%;
width: 27%;
}

.Div1 .Btns{
height: 4.4%;
top: 6%;
}

.Div2 .Btns{
height: 1.9%;
top: 2.3%;
}
<head>
</head>
<body>
<div class="Div1">
<button class="Btns">Button 1</button>
</div>
<div class="Div2">
<button class="Btns">Button 2</button>
</div>
</body>

关于HTML Css 位置不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48865820/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com