场景:
在 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%;
}
问题:
最佳答案
如您所知,您不能强制 position:fixed
流动,因此您的问题没有答案可以按照您想要的方式进行。
但是您描述问题的方式与支持不同的浏览器大小有关。如果是这样的话,那么在我看来媒体查询就是您问题的答案。
CSS 支持 @media { ... }
block ,它允许您指定仅在特定浏览器尺寸下发挥作用的样式。因此,为了解决您的问题,您需要找出导致布局更改的浏览器宽度(调整大小非常缓慢;它会以特定大小翻转),并编写一个媒体查询来更改您的样式表以使其小于该大小.
如果没有您的布局的(很多)更多细节,我无法真正为您提供具体的代码,但是如果您还没有使用媒体查询,可以在线获得很多资源来了解它们。
还值得注意的是,position:fixed
在浏览器尺寸较小的情况下通常会很麻烦,以至于很多移动浏览器在一段时间内故意不支持它。现在已经改变了,但它仍然会导致布局问题,因此您可能希望使用媒体查询在低宽度浏览器中完全关闭它。
关于html - 需要使用:fixed but still need element in flow.位置怎么办?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44660955/