Question

我正在尝试使用CSS样式创建一个HTML网站，并遇到以下问题：

根据显示器尺寸，我的HTML元素的定位更改。因此，如果它是一个更大的屏幕，那么让我们说一切都正确。但如果你在一个较小的屏幕上打开它，就不会显示所有内容！
如果我放大浏览器视图，元素会相互叠加 - 但我想保持原样（即使这意味着由于高变焦，它们不会显示在屏幕上IN）。

（我还无法发布图片，所以我在图片中添加一个链接来解释abit更多）：

enter image description here

我还发布了一个小提琴，您可以在其中看到我的CSS以及与之相关的HTML部分：

I have to write some code, but my code is too long and wouldn't look nice.

如果你能在这里帮助我，那将是非常好的。如果解决如何解决它是一个更复杂的问题，我会问，如果你可以改变我的小提琴到一个工作版本（如果它没有太多问题）。

我已经检查了类似的问题，但没有有效的答案帮助我解决了我的问题。

Answer 1

因此，您获得此行为的原因归结为您已将两个按钮设置为每个固定且位置设置为％的事实。这意味着每个人的位置计算为相对于“视口”的百分比。（浏览器窗口）。如果窗口宽度仅为500px，那么40％左侧位置按钮位于200px，50％左侧位置按钮位于250px，从而导致它们重叠。

一般来说，我不会在这里使用固定定位，但如果没有看到更多代码，就无法提供更好的替代方案。（也许您希望通过在CR上发布所有代码来获得一般反馈。

您可以通过将两个元素包装在div中来解决问题，并为该div赋予第一个元素的固定位置值，并允许第二个按钮相对于第一个元素定位。

以下是该方法的示例以及您更新的fiddle：

更改您的HTML：

<div class="btns">
    <a href='index.html' class='button_lay'>NONE</a>
    <a href='dft.html' class='button_dft'>NONE2</a>
</div>

将.btns类的规则添加到css中，并从每个按钮中删除固定位置：

.btns {
    position: fixed;
    top: 80%;
    left: 40%;
    min-width: 300px;
}