Question

我不知道如何在Stack Overflow中搜索相同的问题。所以，我问这个问题。

我设置了两个按钮position: absolute;和他们的父元素position: relative;。如果是大 Chrome Window ，它们很漂亮。使用鼠标时，将窗口大小更改为较小的大小。按钮位置错误。他们很难看。如下图所示：

大窗口：我需要的位置有红色按钮和绿色按钮。

小窗口：红色按钮和绿色按钮位置错误。

在小窗口中，两个按钮位于中心位置。（我看起来像是在中心位置。）

我想在蓝色元素的同一右侧和顶部中心位置需要它们。

我的代码如下：

<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下载按钮。我需要匹配不同大小的浏览器。

=============

对不起，我的描述还不够。我在下面添加了真实的图片。

正确的位置：

小尺寸和错误的位置：

Answer 1

如果您的意思是在浏览器调整大小时不想移动按钮，请尝试使用

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，相应地调整值，并且不使用像素，总是百分比以便它不会移动

Answer 2

不可否认，我对编程还是比较新的，所以这个答案可能不正确，但你有引导程序吗？如果是这样，您可以将“容器流体”类应用于父元素，并允许它们根据查看它们的屏幕大小调整其大小。

如果我错了或者有更好的解决方案，请纠正我。

如何使用特定的父元素修复元素位置匹配不同大小的浏览器

2 个答案: