Question

情境：

在HTML中，我有2个元素（顶部栏和图像）。顶部栏需要在position:fixed（这将打破流量，我理解）。和第二个元素有margin-top后按下图像＆＃34;顶栏＆＃34;。在我最小化浏览器宽度之前，这没有问题顶部栏中的内容＆＃34;推动容器高度并重叠第二个元素，即图像。这看起来很难看。

无论如何要将第二个元素放在第一个元素的流中，这样无论我如何最小化浏览器宽度，第二个元素都是聪明到可以推倒。

代码：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 { ... }块，允许您指定仅在某些浏览器大小下发挥作用的样式。因此，为了解决您的问题，您需要找出导致布局更改的浏览器宽度（调整速度非常缓慢;它将以特定大小翻转），并编写一个更改样式表的媒体查询，其大小低于

如果没有（很多）布局的更多细节，我无法真正为您提供特定的代码，但如果您还没有使用它们，那么在线可以获得大量资源来了解媒体查询

值得注意的是，position:fixed在浏览器尺寸较小的情况下经常会出现麻烦，以至于很多移动浏览器在一段时间内都没有刻意支持它。现在已经改变了，但它仍然会导致布局格式，所以你可能想要使用媒体查询在低宽度浏览器中完全关闭它。

Answer 2

如果我了解您想要达到的目标，那么可以采用一种解决方法来实现类似的结果。

首先，你实际上无法使你的TopBar表现得像一个位置为fixed的流动bloc元素。所以，让我们做静态。

将通过设置正文属性

来提供“固定”行为

    body {
  /* NOTICE the vertical flex box, makes the height adjust 
     automaticaly (no need to toggle)*/
  display: flex;
  flex-direction: column;
  max-height: 100vh; /* Restrain the body to the window height */
  overflow-y: hidden; /* Prevent scrollbar on body */
}

.TopBar {
  display: block; /* Blocks have 100% widht by default, don't need to 
                     specify */
  padding: 10px;
  position: static; /* No need to specify, it's the default value */
  /* Helpers to make the TopBar easier to track */
  background-color: #000000;
  opacity: 0.5;
  /* This is not part of the solution, it's only to make the height inversely proportional to window width
     e.g. make it grow while the other decrease 
  */
  height: calc(200px - 10vw);
}

/* 
    Just under the TopBar, lets place a container element that will act 
    as scrolling window 
*/

.container {
  height: 100vh; /* max-height is superfluous because of the overflow. */
  /* This will simply make the scrolling on the container instead of the body */
  overflow-y: scroll;
}
.TopBar {
  /* 1st Element */
}
.TopBar > div {
  color: white;
}
/* simply to display some text */
p {
  width: 50%;
  margin: 1em auto;
}

将您的旋转木马放在容器内并vo！不需要位置也不需要z-index摆弄。 TopBar和容器正在流动，前者将“推动”后者。

话虽如此，一些媒体查询调整不会受到伤害。根据您的图片，TopBar中的元素是内联（内联或内联块）。你应该考虑让它们“阻止”。灵活盒也值得一些考虑。

希望这个帮助

Answer 3

回应Spudley使用@media解决问题的答案，我试图找到一些具有“固定”效果的页面。溢出元素，并通过Web编辑器查看代码。这就是我得到的。我慢慢删除所有的CSS和相关元素，直到我得到“修复”不工作。虽然仍然设置在position：relative上，但是附加了一个CSS，当我删除它时，“固定”效果就消失了。

参考网址：

https://www.w3schools.com/css/css3_colors.asp

我过滤源文件：

value1, value2, etc...

屏幕捕获解决我的问题的编码（我猜）

Click Here to see the screen shot

需要使用位置：固定但仍需要流量元素。怎么做？

3 个答案: