我不知道如何在 Stack Overflow 中搜索相同的问题。所以，我问这个问题。
我设置了两个按钮 position: absolute; 和它们的父元素 position: relative;。
如果是大的 Chrome 窗口，它们就很漂亮。使用鼠标时，将窗口大小更改为较小的大小。按钮位置错误。它们很难看。
如下图:
大窗口:
我需要的位置的红色按钮和绿色按钮。
小窗口: 红色按钮和绿色按钮位置错误。
在小窗口中，两个按钮位于中间位置。(我看起来是在中间位置。)
我需要它们在蓝色元素中相同的右侧或顶部百分比位置。
我的代码如下:
<style>
.content {
width: 100vw;
}
#fullpage .section img {
margin: 0 auto;
width: 1200px;
display: block;
}
.apple {
position: absolute;
right: 300px;
top: -560px;
width: 350px;
height: 90px;
background-color: red;
}
.apple:hover {
background: url("./img/Andriod-hover.png");
}
.android {
position:relative;
right: 300px;
top: -660px;
width: 350px;
height: 90px;
background-color: green;
}
.android:hover {
background: url("./img/iphone-hover.png");
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fullpage.css" />
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor : ['#58C0F2','#FBFFF1', '#FBFFF1'],
});
});
</script>
<div id="fullpage">
<div class="section section1">
<div class="content">
<img src="" alt="">
<div class="apple"></div>
<div class="android"></div>
</div>
</div>
</div>
</body>
说实话，蓝色父元素中的两个按钮是iOS和Android下载按钮。我需要匹配不同大小的浏览器。
=============
对不起，我的描述不够。我添加到下面的真实图像。
正确的位置:
体积小，位置不对:
最佳答案
如果你的意思是你不想在浏览器调整大小时移动按钮，试试这个
body {
height: 100vh;
width: 100vw;
background-color: pink;
position: relative;
}
.btnHolder {
position: absolute;
top: 50%;
left: 80%;
transform: translate(-80%, -50%);
}
.btnHolder button {
display: block;
}<div class="btnHolder">
<button>Button 1</button>
<button>Button 2</button>
</div>这将使按钮始终位于右侧，即使调整大小也是如此。
我没有使用你的代码，这样我就可以在调整大小时不移动的情况下提供最小的定位方式，只需使用我使用的 css，相应地调整值，并且不使用像素，总是百分比这样它不会移动
关于jquery - 匹配不同尺寸的浏览器时，如何用父元素的specific固定一个元素的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46926000/