Flex 容器移出页面

Question

我的 flex 容器有问题，基本上只是离开页面并像这样：

我尝试将 display 设置为 table 并使用 <td> 元素将我的东西放入，但它没有显示在框架之外。我希望它是一个 flex 容器，其中包含第一个 <div> 和 <header>s。

HTML：

<div class="presen">

        <div class="tisane"> <!--overlap d'images-->
            <img id="img1" src="images/herbal-tea-cup-png-images-35.png" alt="Tasse d'infusion de millepertuis" />
            <img id="img2" src="images/noircontourthe.png" alt="" />
        </div> 

        <header>

        </header>

    </div> 

相关元素的CSS：

      .tisane {
      display: inline-flex;

  }

  .tisane img#img1 {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 300px;
      height: 220px;
      position: absolute;
      top: 300px;
      left: 140px;
      z-index: 2;
  }

  .tisane img#img2 {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 330px;
      height: 230px;
      position: absolute;
      top: 298px;
      left: 130px;
      z-index: 1;
  }

  header h1 {
      text-align: center;
  }

  .presen {
      display: flex;
      flex-direction: column;
      top: 298px;
      padding: 0;
      
  }

谢谢。

Answer 1

您需要设置body 和presen 类的高度。

.tisane {
  display: inline-flex;
}

.tisane img#img1 {
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 220px;
  position: absolute;
  top: 300px;
  left: 140px;
  z-index: 2;
}

.tisane img#img2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 330px;
  height: 230px;
  position: absolute;
  top: 600px;
  left: 130px;
  z-index: 1;
}

header h1 {
  text-align: center;
}

.presen {
  display: flex;
  flex-direction: column;
  top: 298px;
  padding: 0;
  height: 100%; //The height of a flexbox can be also set to a percentage
}

body {
  height: 100vh;
}

<div class="presen">

    <div class="tisane"> <!--overlap d'images-->
        <img id="img1" src="https://via.placeholder.com/250" alt="Tasse d'infusion de millepertuis" />
        <img id="img2" src="https://via.placeholder.com/250" alt="" />
    </div> 

    <header>

    </header>

</div>