Question

我正在尝试创建一个带有导航栏和标题居中的简单网页。但是，标题margin的{{1}}在某种程度上影响了导航栏的位置。

我认为这是由两个相邻的块级框的边距崩溃引起的吗？我试图通过在导航栏后面添加一个div来解决此问题，但效果不佳。

是否有更好的方法来实现我想要的？

下面是我的简化HTML代码：

<br>

以及CSS样式：

<header id='navbar-bg'>
  <div id='navbar'>
    <ul>
      <li>Foo</li>
      <li>Bar</li>
    </ul>
  </div>
</header>

<div id='body'>
  <h1 id='search-title'>This is a title</h1>
</div>

由于#navbar-bg { position: fixed; width: 100%; } #navbar { display: flex; align-items: center; } #body { margin-top: 200px; }的位置是固定的，所以我希望导航栏作为一个整体固定，而#navbar-bg的{{1}}应该不会影响导航栏。 margin-top却将#body和导航栏都向下移动了，这很奇怪。

我想使用一种优雅的解决方案解决此问题，而不是在margin-top之后添加#body。

Answer 1

您必须将Ord元素设置为top: 0px。根据{{3}}：

该元素从常规文档流中删除，并且在页面布局中没有为该元素创建空间。它相对于由视口建立的初始包含块定位，除非其祖先之一的transform，perspective或filter属性设置为除其他属性外（参见CSS Transforms Spec），在这种情况下，祖先的行为与包含块。（请注意，浏览器与透视图和过滤器不一致，导致包含块的形成。）其最终位置由top，right，bottom和left的值确定。

因此，当您不对#navbar-bg元素使用top时，它会退回到其初始值，该初始值是相对于body的。因此，身体边缘也存在于该元素中。

Answer 2

对于导航栏，最好将其放置在主体的左侧，因此您可以在CSS中执行此操作：

// the following code cannot be run at the beginning of the document
var _originalQuerySelectorAll = document.querySelectorAll;

Flexbox之后受保证金影响

2 个答案: