绝对居中弹性项目会丢失按钮悬停，为什么？

Question

我正在尝试创建一个 header 页面，将页面标题放在中间并绝对居中。我尝试使用 flex box 和 justify-content:space-between 来做到这一点，但是如下所示，我的标题根据右侧按钮的宽度而倾斜（我夸大了它以显示效果）

虽然我能够将标题绝对居中（在 h1 上使用绝对定位），如“Want”示例中所示，但按钮上出现了一个奇怪的 side-effect - 它们不再可点击！我很困惑。这里发生了什么？如何使标题居中并保持按钮正常工作（使用 flex）？

body {
  max-width: 32em;
  margin: 0 auto;
}

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 2em;
  justify-content: space-between;
  border-bottom: 1px solid gray;
  margin: 20px auto;
}

/* My attempt at keeping h1 absolutely centered on the page width */

h1.want {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 20px;
  padding: 0;
  margin: 0;
}

<header>
  <nav>
    <div>
      <button>Foo</button>
    </div>
    <div>
      <div>
        <h1 class="want">Want</h1>
      </div>
    </div>
    <div>
      <button>Bar</button>
      <button>Bas</button>
      <button>Bat</button>
      <button>Bau</button>
    </div>
  </nav>
  The buttons don't work here!
  <nav>
    <div>
      <button>Foo</button>
    </div>
    <div>
      <div>
        <h1>Got this</h1>
      </div>
    </div>
    <div>
      <button>Bar</button>
      <button>Bas</button>
      <button>Bat</button>
      <button>Bau</button>
    </div>
  </nav>
  Buttons work here.
</header>

Answer 1

如前所述 user:Phix，问题是您的标题（使用 position: absolute; 属性）叠加按钮。在这种情况下，您应该将 z-index 添加到兄弟节点。

.button-wrapper {
  z-index: 1;
}

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      max-width: 32em;
      margin: 0 auto;
    }
    
    nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 2em;
      justify-content: space-between;
      border-bottom: 1px solid gray;
      margin: 20px auto;
    }
    /* My attempt at keeping h1 absolutely centered on the page width */
    
    h1.want {
      left: 0;
      position: absolute;
      right: 0;
      text-align: center;
      top: 20px;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <header>
    <nav>
      <div class="button-wrapper">
        <button>Foo</button>
      </div>
      <div>
        <div>
          <h1 class="want">Want</h1>
        </div>
      </div>
      <div>
        <button>Bar</button>
        <button>Bas</button>
        <button>Bat</button>
        <button>Bau</button>
      </div>
    </nav>
    The buttons don't work here!
    <nav>
      <div>
        <button>Foo</button>
      </div>
      <div>
        <div>
          <h1>Got this</h1>
        </div>
      </div>
      <div>
        <button>Bar</button>
        <button>Bas</button>
        <button>Bat</button>
        <button>Bau</button>
      </div>
    </nav>
    Buttons work here.
  </header>
</body>

</html>

Answer 2

就像@Phix 在评论中指出的那样，使用 position: absolute 与 left: 0 和 right: 0 有效地给 h1 一个 100% 的宽度，然后覆盖相关的按钮所以他们无法到达。您可以通过给 h1 一个背景色来证明这一点（或者更好 - 使用浏览器中的开发工具）。

如果您简单地删除 h1.want 的所有样式，您无需诉诸绝对定位即可获得所需的结果：

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      max-width: 32em;
      margin: 0 auto;
    }
    
    nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 2em;
      justify-content: space-between;
      border-bottom: 1px solid gray;
      margin: 20px auto;
    }
    /* My attempt at keeping h1 absolutely centered on the page width */
    /* h1.want {
      left: 0;
      position: absolute;
      right: 0;
      text-align: center;
      top: 20px;
      padding: 0;
      margin: 0;
    } */
  </style>
</head>

<body>
  <header>
    <nav>
      <div>
        <button>Foo</button>
      </div>
      <div>
        <div>
          <h1 class="want">Want</h1>
        </div>
      </div>
      <div>
        <button>Bar</button>
        <button>Bas</button>
        <button>Bat</button>
        <button>Bau</button>
      </div>
    </nav>
    The buttons don't work here!
    <nav>
      <div>
        <button>Foo</button>
      </div>
      <div>
        <div>
          <h1>Got this</h1>
        </div>
      </div>
      <div>
        <button>Bar</button>
        <button>Bas</button>
        <button>Bat</button>
        <button>Bau</button>
      </div>
    </nav>
    Buttons work here.
  </header>
</body>

</html>

绝对居中弹性项目会丢失按钮悬停，为什么？

Absolute centering a flex item loses the button hovers, why?

html

css

flexbox