如何在没有JavaScript的情况下将div扩展到父列表容器之外

Question

我正在尝试为客户网站制作一个“关于我们”页面，并且本质上是想完成一个弹出模式，该模式将浏览器的视口周围填充2毫米的间隙。该模式将包含员工的照片，姓名，简历和教育背景。我正在寻找针对此问题的纯CSS解决方案。您单击以使模式出现的员工图像是由php填充的无序列表的列表项。我遇到的问题是使模式扩展到<ul>之外。下面是我要完成的工作的线框。

我已经尝试了类似问题（下面列出）的一些解决方案，但是它们并不能解决我的问题。 Extend child div beyond container div Expand DIV beyond parent List Item

这是我正在使用的标记：

div {
  &.container {
    >div {
      &.container {
        &.whoWeAre {
          margin: 0;
          padding: 0;
          list-style: none;
          >ul {
            &.whoWeAre {
              width: 100%;
              margin: 0;
              padding: 0 0 0 1rem;
              position: relative;
              clear: both;
              list-style-type: none;
              display: inline-block;
              @media only screen and (min-width: 75em) {
                padding: 0;
              }
              >input {
                &.dossierToggle {
                  position: absolute;
                  left: -4000px;
                  top: -4000px;
                  &:checked {
                    ~li {
                      position: absolute;
                      width: 100vw;
                      height: 100vh;
                      margin: 2rem;
                      >div {}
                    }
                  }
                }
              }
              >li {
                box-sizing: border-box;
                width: 100%;
                padding: 0;
                position: relative;
                background-color: #FFFFFF;
                border: none;
                line-height: 2.2rem;
                text-align: left;
                float: left;
                margin-bottom: 1rem;
                animation: slide-in-blurred-left 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
                @media only screen and (min-width: 75em) {
                  width: calc(25% - 2rem);
                  height: 33rem;
                  margin-bottom: 2rem;
                  margin-right: 1rem;
                  margin-left: 1rem;
                  border: 1px solid $faint-grey;
                  background: orange;
                }
                >label {
                  width: 100%;
                  height: 100%;
                  display: block;
                  position: relative;
                }
              }
            }
          }
        }
      }
    }
  }
}

<div class="container">
  <h2>who we are</h2>
  <h6>meet our pastors</h6>
  <div class="container whoWeAre">
    <ul class="whoWeAre">
      <?php
				$sql = "SELECT * FROM staff WHERE flc='1' and pastor='1' ORDER BY `positionRank`";
				$query = $connection->query( $sql );
				if ( $query->num_rows > 0 ) {
					while ( $row = $query->fetch_assoc() ) {
				?>
        <input type="checkbox" class="dossierToggle" id="toggle<?php echo $row[ " nameFirst " ] . $row[ "nameLast " ]; ?>">
        <li>
          <label for="toggle<?php echo $row[ " nameFirst " ] . $row[ "nameLast " ]; ?>"></label>
          <div></div>
        </li>
        <?php } } ?>
    </ul>
  </div>
</div>