Jquery 在匹配不同大小的浏览器时，如何使用父元素的特定位置确定元素位置
我不知道如何在Jquery 在匹配不同大小的浏览器时，如何使用父元素的特定位置确定元素位置,jquery,html,css,Jquery,Html,Css,我不知道如何在堆栈溢出中搜索相同的问题。所以，我问这个问题 我设置了两个按钮位置：绝对及其父元素位置：相对。 如果大的铬合金窗口，它们很漂亮。使用鼠标时，将窗口大小更改为较小的大小。这些按钮的位置不对。它们很难看。 如下图所示： 大窗口： 红色按钮和绿色按钮在我需要的位置。 小窗口： 红色按钮和绿色按钮位于错误位置 在小窗口中，两个按钮位于中心位置。（我看起来它们位于中心位置。） 我希望它们在蓝色元素中处于相同的右侧或顶部位置。 我的代码如下： <style> .
堆栈溢出位置：绝对及其父元素位置：相对。
如果大的铬合金窗口，它们很漂亮。使用鼠标时，将窗口大小更改为较小的大小。这些按钮的位置不对。它们很难看。
如下图所示：
大窗口：
红色按钮和绿色按钮在我需要的位置。
小窗口：
红色按钮和绿色按钮位于错误位置
在小窗口中，两个按钮位于中心位置。（我看起来它们位于中心位置。）
我希望它们在蓝色元素中处于相同的右侧或顶部位置。
我的代码如下：
<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>
.内容{
宽度：100vw；
}
#整版。章节img{
保证金：0自动；
宽度：1200px；
显示：块；
}
.苹果{
位置：绝对位置；
右：300px；
顶部：-560px；
宽度：350px；
高度：90px；
背景色：红色；
}
.苹果：悬停{
背景：url（“./img/Andriod hover.png”）；
}
.安卓{
位置：相对位置；
右：300px；
顶部：-660px；
宽度：350px；
高度：90px；
背景颜色：绿色；
}
.安卓：悬停{
背景：url（“./img/iphonehover.png”）；
}
$（文档）.ready（函数（）{
$（“#全页”）。全页({
章节颜色：['#58C0F2'、'#FBFFF1'、'#FBFFF1']，
});
});
说实话，蓝色父元素中的两个按钮是iOS
和Android
下载按钮。我需要匹配不同大小的浏览器
=============
对不起，我的描述不够。我添加到下面的真实图像中
正确的位置：
小尺寸和错误的位置：
无可否认，我对编程还是比较陌生的，所以这个答案可能不正确，但是你有引导程序吗？如果是这样，您可以将“container fluid”类应用于父元素，这将允许它们根据查看它们的屏幕大小调整大小
如果我错了，或者有更好的解决方案，请纠正我 如果您的意思是不希望在浏览器调整大小时移动按钮，请尝试以下操作
正文{
高度：100vh；
宽度：100vw；
背景颜色：粉红色；
位置：相对位置；
}
.btnHolder{
位置：绝对位置；
最高：50%；
左：80%；
转换：翻译（-80%，-50%）；
}
.btnHolder按钮{
显示：块；
}
按钮1
按钮2
我会在我的描述中添加图像。我很抱歉。我浪费了你的时间。如果我需要使用像素单位。你知道吗？它真的应该绝对定位吗？从图中可以看出，三个内嵌div应该可以做到这一点，这样按钮就不会与其他元素重叠。设置.btnHolder
位于body元素的中心底部点，并将按钮的位置设置为位置：绝对，顶部：-200px
。