如何在窗口调整大小时清除绝对定位的项目？答案

【问题标题】：How to clear absolute positioned items on window resize?如何在窗口调整大小时清除绝对定位的项目？
【发布时间】：2025-08-19 12:50:02
【问题描述】：

因此，默认情况下，如果调整窗口大小，绝对定位的 div 将不在视野范围内，但只有 div 的左侧。右边能达到同样的效果吗？

我的意思可以在这里找到：http://diabetes.connectionsquad.com

如果您将浏览器窗口的大小调整为低于 1010 像素，您会注意到导航栏的左侧消失了，但如果您向右滚动，导航栏的右侧将保持原位。

基本上我有设置为 1000px 的内容 div。我的导航栏是 1050，它以绝对位置居中在该内容 div 中，因此它在每边 25px 的内容 div 上方悬挂。当浏览器大小低于 1050 像素时，我希望 25 像素的区域折叠并且不可见。默认情况下，浏览器在左侧执行此操作，但不在右侧执行此操作。

你能像清除左侧一样清除右侧吗？我尝试研究它，但我得到了一堆垃圾，因为搜索词有偏差。

【问题讨论】：

标签： html css window-resize

【解决方案1】：

我在 Chrome 上看不到问题。但是，您没有设置 top 或 left，它默认为顶部和左侧的 0,0，因此它附加到其相对父级的左上角。如果你想让它附在右上角，你可以给它

right: 0;
top: 0; /* Don't need this, it's the default;

【讨论】：

【解决方案2】：

“视野之外”是指您的意思是超出您的设置的内容宽度。

看看负面定位。 左：-20px；右：-20px

 <style type="text/css">
   div { position:absolute; left:-20px; right:-20px }
 </style>

希望有帮助，

罗伯

【讨论】：

【解决方案3】：

你的布局不需要任何绝对定位，它会让你头疼。

你可以做一个灵活的外边距或外边距，而不是在中心使用固定宽度的 div。

/*Mobile*/
.outermargin {padding:0% 0% }

    /*Screen*/
    @media only screen
    and (min-width : 700px) {
        .outermargin { padding: 0% 7%; }
    }
    @media only screen
    and (min-width : 1400px) {
        .outermargin { padding: 0% 20%; }
    }

根据您的需要使用边距或内边距...这种 CSS 结构是一种在您习惯后变得更加流畅和轻松的方法。

或者你可以使用类似这样的方式将其全部居中：

    #mycontainer { 
       margin: 0 auto; max-width:30em; }

【讨论】：