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

I'm trying to create a header for a page that puts the title of the page in the middle and centered absolutely. I tried to do this with flex box and justify-content:space-between However as shown below I get the title skewed depending on the buttons width on the right (I've exaggerated that to show the effect)

While I was able to absolutely center the title (using absolute positioning on the h1) as in the example of "Want", a strange side-effect shows up on the buttons- they aren't clickable anymore! I'm flummoxed. What's going on here? How do I center the title and still keep the buttons working (with flex)?

<!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 >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>

CodePudding user response：

As mentioned user:Phix, problem is your headline (with position: absolute; property) overlay button. In this case you should add z-index to sibling node.

.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 >
        <button>Foo</button>
      </div>
      <div>
        <div>
          <h1 >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>

CodePudding user response：

Like @Phix pointed out in the comment, using position: absolute with left: 0 and right: 0 effectively gives the h1 a 100% width which then covers the associated buttons so they are unreachable. You can prove this by giving that h1 a background color (or better yet - use the dev tools in the browser).

If you simply remove all of the styling for h1.want you get the desired result without resorting to absolute positioning:

<!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 >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>