HTML Css位置绝对不工作[重复]

问题描述 投票：0回答：1

这个问题与以下内容完全相同：

如何将这些按钮完全保留在背景图像的框中？当您调整窗口/浏览器的大小时，它们的位置/大小会发生变化，并且它们不再适合背景图像框。

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: 1.9vw;
    left: 17.4vw;
    width: 26.3vw;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="Div1">
        <button class="Btns" style="top: 4.8vw">Button 1</button>
    </div>
    <div class="Div2">
        <button class="Btns" style="top: 4vw">Button 1</button>
    </div>
</body>
</html>
html css
1个回答
0
投票

我认为这里的问题是按钮的测量和默认填充，边框和浏览器特定样式。我通过一些手动调整编辑了计算值的小提琴：

简而言之，填充也应该是vw单位，并设置-webkit-appearance: none;。

你可以在这里看到CodePen：

https://codepen.io/elujambio/pen/EQQOgK

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: 1.8vw;
    box-sizing:  border-box; 
    padding:  .25vw 0; 
    left: 18vw;
    width: 26.75vw; 
    -webkit-appearance:  none;  
    
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="Div1">
        <button class="Btns" style="top: 4.8vw">Button 1</button>
    </div>
    <div class="Div2">
        <button class="Btns" style="top: 4vw">Button 1</button>
    </div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.