Question

为什么在调整窗口大小时我的按钮不能保持在正确的位置？据我所知，它应该有用。

在我上一篇文章中，我想出了如何正确定位窗口大小调整（CSS Top Relative To Screen）的内容，但使用两个div似乎不起作用。

{'Address': 'No.250/1, 16th and 17th cross...', 'State': 'Karnataka', 'City': 'Bangalore', etc}

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;
}

Answer 1

<强> 更新：

嘿，让我知道这是否适合你：

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职位不起作用

1 个答案: