避免绝对定位的元素推动页面宽度的边界答案

【问题标题】：Avoid that an absolute positioned element push the boundaries of the page width避免绝对定位的元素推动页面宽度的边界
【发布时间】：2021-03-24 00:59:01
【问题描述】：

我有一个绝对定位的 div，里面有一张图片。它使用顶部和左侧定位，元素的宽度是相对的，我使用百分比。我正在使用 Bootstrap 作为响应式框架。

问题是，我无法避免水平滚动，无论是电脑还是智能手机都在做水平滚动。

我认为在绝对定位中这不会影响。但它使视口更大，因此出现了水平滚动。

我不知道该怎么做才能解决这个问题，或者从哪里开始。

【问题讨论】：

stackoverflow.com/a/41057738/4206079
绝对定位不会影响其他元素，但浏览器仍然必须让您能够滚动才能看到它除非您告诉它不要这样做。身体上的overflow-x:hidden 通常足以解决此问题。
但是，寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
你好 @Paulie_D 这仅适用于桌面，我在移动设备上仍然遇到问题，我正在 android chrome 上对其进行测试
这是我到现在为止的代码：(sirkell.com/demos/test-mds-01) 正如你所看到的，它在桌面上解决了，但在移动设备上，特别是在 android chrome 上，它仍然出现

标签： css position

【解决方案1】：

你可以放

overflow-x: hidden;

在body 标签上。

这避免了由于某处绝对定位元素导致的错误水平滚动。

【讨论】：

【解决方案2】：

在你的 :

中使用这个“元”标签

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

然后你会或多或少看起来像这样：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <title>Menu Page</title>

    <link rel="stylesheet" href="css/style.css">
 </head>

【讨论】：

你好，这是我的：<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
能否提供更多的html和css代码，否则很难想到是什么原因造成的
您好 Atul，这是我上传代码的链接。干杯! (sirkell.com/demos/test-mds-01)
Abiel，我在 initial-scale=1 之后编辑了答案中的元标记，您必须添加 user-scalable=no。我希望这对你有用。
好消息！！，它有效，现在它也适用于移动设备。 'user-scalable=no'到底是做什么的？