如何让视口外DIV与可视视口DIV完美相邻对齐

我正在开发一个项目，点击两个按钮可以实现一个DIV滑出、另一个从屏幕外滑入的效果。目前功能正常，但需要让两个DIV并排对齐，且视口外的DIV始终位于可视DIV的下方。试过CSS float、display: table-cell等方法，都没解决，而且不能用absolute或fixed定位。

现有代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="nav"><a href="#" class="tow">Left Div</a>
  <a href="#" class="toc">Right Div</a>
</div><br />
<span style="color:red;">Sample Viewport<br /><br /></span>
<div id="wrapper">
  <div class="ctow">TOW Div Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  <div class="ctoc nodisplay">TOC Div</div>
</div>
<div id="footer">Footer</div>

CSS #

/* Flexbox Responsive Off-Canvas Layout */

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.nav {
  display: inline-block;
  padding: 20px;
}

.nav a {
  margin: 20px;
}

#wrapper {
  height: 100%;
  width: 50%;
  padding: 0px;
  margin: 0px;
  border: 1px solid red;
  text-align: center;
}

.ctow {
  background-color: darkorange;
  margin: 0;
  transform: translate(0%);
  vertical-align: top;
  padding: 50px;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}

.ctoc {
  background-color: lightblue;
  margin: 0;
  transform: translate(100%);
  padding: 50px;
  vertical-align: top;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}

.ctow.nodisplay {
  transform: translate(-100%);
}

.ctoc.nodisplay {
  transform: translate(100%);
}

.ctoc.active {
  transform: translate(0%);
}

#footer {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  background-color: gray;
  height: 10%;
  width: 100%;
  padding: 0em;
  margin: 0;
}

/** 1 PANEL **/

#right,
#left {
  display: none;
}

/** 2 PANELS (-R) **/

@media (min-width: 41em) {
  #left {
    display: box;
  }
}

/** 3 PANELS **/

@media (min-width: 61em) {
  #right,
  #left {
    display: box;
  }
}

JavaScript #

jQuery(document).ready(function($) {
  $(".tow").click(function() {
    if ($(".ctow").hasClass("nodisplay")) {
      $(".ctow").removeClass("nodisplay");
      $(".ctoc").addClass("nodisplay");
      $(".ctoc").removeClass("active");
      $(".tow").addClass("selected");
      $(".toc").removeClass("selected");
    }
  });

  $(".toc").click(function() {
    if ($(".ctoc").hasClass("nodisplay")) {
      $(".ctoc").addClass("active");
      $(".ctoc").removeClass("nodisplay");
      $(".ctow").addClass("nodisplay");
      $(".tow").removeClass("selected");
      $(".toc").addClass("selected");
    }
  });
});

解决方案 #

要实现需求，核心是让两个DIV在同一布局流内并排，同时通过transform控制位置、z-index控制层级，具体修改如下：

1. 调整容器布局 #

给#wrapper添加flex布局和溢出隐藏，让子元素自然并排，且隐藏视口外内容：

#wrapper {
  height: 100%;
  width: 50%;
  padding: 0px;
  margin: 0px;
  border: 1px solid red;
  text-align: center;
  display: flex; /* 启用flex布局 */
  overflow: hidden; /* 隐藏溢出的内容 */
}

2. 统一子元素样式并控制层级 #

让两个DIV占满容器宽度，通过z-index动态切换层级，确保非可视DIV在下方：

.ctow, .ctoc {
  width: 100%; /* 占满容器宽度 */
  flex-shrink: 0; /* 禁止收缩，保持尺寸一致 */
  margin: 0;
  padding: 50px;
  vertical-align: top;
  transition-duration: 600ms;
  position: relative; /* 让z-index生效 */
}

.ctow {
  background-color: darkorange;
  transform: translate(0%);
  z-index: 2; /* 可视状态层级更高 */
}

.ctoc {
  background-color: lightblue;
  transform: translate(100%);
  z-index: 1; /* 默认非可视状态层级更低 */
}

.ctow.nodisplay {
  transform: translate(-100%);
  z-index: 1; /* 滑出后降低层级 */
}

.ctoc.nodisplay {
  transform: translate(100%);
}

.ctoc.active {
  transform: translate(0%);
  z-index: 2; /* 滑入后提高层级 */
}

3. 简化JS逻辑（可选） #

优化类名操作，减少重复代码：

jQuery(document).ready(function($) {
  $(".tow").click(function() {
    if ($(".ctow").hasClass("nodisplay")) {
      $(".ctow").toggleClass("nodisplay active");
      $(".ctoc").toggleClass("nodisplay active");
      $(this).addClass("selected").siblings().removeClass("selected");
    }
  });

  $(".toc").click(function() {
    if ($(".ctoc").hasClass("nodisplay")) {
      $(".ctoc").toggleClass("nodisplay active");
      $(".ctow").toggleClass("nodisplay active");
      $(this).addClass("selected").siblings().removeClass("selected");
    }
  });
});

原理说明 #

• flex布局让两个DIV在同一行并排，且保持相同尺寸；
• overflow: hidden确保视口外的DIV不会撑开容器或显示在可视区域外；
• 动态调整z-index，让当前可视的DIV始终处于上层，非可视的DIV在下方；
• 保留transform实现平滑过渡，完全符合不能使用absolute/fixed定位的要求。

内容的提问来源于stack exchange，提问作者Kris