HTML Css职位不工作 [英] HTML Css Positions Not Working
本文介绍了HTML Css职位不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为什么当窗口调整大小时，我的按钮不能保持在正确的位置？据我了解，它应该工作。
在我以前的文章中，我想出了如何正确定位窗口大小的东西（ CSS顶部相对于屏幕），但使用两个div似乎不起作用。
html，body {margin：0;}。Div1 {background-image：url https://imgur.com/7NQ3IOt.jpg）;背景大小：100％100％;背景重复：不重复;位置：相对; height：76.1vw;}。Div2 {background-image：url（https://imgur.com/CjVMSqG.jpg）;背景大小：100％100％;背景重复：不重复;位置：相对;身高：169vw;}。Btns {position：absolute; font-size：2.1vw; left：16.5vw;}
<！DOCTYPE html> < HTML>< HEAD>< /头><身体GT; < div class =Div1> < button class =Btnsstyle =margin-top：4.8％> Button 1< / button> < / DIV> < div class =Div2> < button class =Btnsstyle =margin-top：4％> Button 2< / button> < / div>< / body>< / html>
h2_lin>解决方案
更新： 为你：
html，body {margin：0;}。Div1 { background-image：url（http://imgur.com/7NQ3IOt.jpg）;背景大小：100％100％;背景重复：不重复;位置：相对;身高：76.1vw; } .Div2 {background-image：url（http://imgur.com/CjVMSqG.jpg）;背景大小：100％100％;背景重复：不重复;位置：相对;身高：169vw;}。Btns {position：absolute; font-size：2.1vw;剩下：17.8％;宽度：27％; } .Div1 .Btns {height：4.4％;顶部：6％;}。Div2 .Btns {height：1.9％;顶部：2.3％;}
< head>< /头><身体GT; < div class =Div1> < button class =Btns>按钮1< /按钮> < / DIV> < div class =Div2> < button class =Btns>按钮2< /按钮> < / DIV> < / body>
Why are my buttons not staying in the correct positions when the window get resized? As far as I understand it it should work.
In my previous post I figured out how to correctly position things for window resizing (CSS Top Relative To Screen), but using two divs seems to not work.
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>
解决方案
UPDATE:
Hey let me know if this works for you:
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职位不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
