html - 需要使用:fixed but still need element in flow.位置怎么办？

Question

场景:

在 HTML 中，我有 2 个元素(顶部栏和图像)。顶部栏需要在 position:fixed (这会打断流程，我明白这一点)。和第二个元素有 margin-top 在“顶栏”。在我最小化浏览器宽度之前，这没有问题，“顶部栏”中的内容插入容器高度并与第二个重叠元素，也就是图像。这看起来很难看。

无论如何要让第二个元素与第一个元素一起流动，这样无论我如何最小化浏览器宽度，第二个元素都是足够聪明，可以向下推。

代码:CSS

.TopBar {                                   /* 1st Element */
    background-color: #000000;
    opacity: 0.5;
    width: 100%;
    position:fixed;
    padding:10px;   
}
.TopBar > div {
    color:white;
}

.carousel {                                 /* 2nd Element */
    display: inline-block;
    margin-top:73px;
}
.carousel_img {
    width: 100%;
}

问题:

Answer 1

如您所知，您不能强制 position:fixed 流动，因此您的问题没有答案可以按照您想要的方式进行。

但是您描述问题的方式与支持不同的浏览器大小有关。如果是这样的话，那么在我看来媒体查询就是您问题的答案。

CSS 支持 @media { ... } block ，它允许您指定仅在特定浏览器尺寸下发挥作用的样式。因此，为了解决您的问题，您需要找出导致布局更改的浏览器宽度(调整大小非常缓慢；它会以特定大小翻转)，并编写一个媒体查询来更改您的样式表以使其小于该大小.

如果没有您的布局的(很多)更多细节，我无法真正为您提供具体的代码，但是如果您还没有使用媒体查询，可以在线获得很多资源来了解它们。

还值得注意的是，position:fixed 在浏览器尺寸较小的情况下通常会很麻烦，以至于很多移动浏览器在一段时间内故意不支持它。现在已经改变了，但它仍然会导致布局问题，因此您可能希望使用媒体查询在低宽度浏览器中完全关闭它。