为什么定位固定div会移到主容器外面？

Question

在下面给出了固定的div CSS：

.top-container {
position: fixed;
width: 100%;
z-index: 999;
}

当我缩小我的屏幕时，这个div打破右侧的主容器，但左侧是可以的。请查看下面的屏幕截图，以便更好地理解。

Answer 1

您必须了解position: fixed;的工作原理。它忽略了任何周围的元素。

您可以找到详细信息here。

这是一个引用：

  

固定位置元素相对于视口或浏览器窗口本身定位。

<强>更新
您可以尝试使用与左侧元素宽度相同的margin-left和与margin-right元素的右侧元素宽度相同的.top-container。这显然不是一个理想的解决方案，但可以解决您的问题。