css - 子 div 出现在父 div 之外

Question

我正在尝试复制 azure 门户设计布局。我面临的挑战是，一旦我进入组件内部(在图像示例“虚拟机”中)，我需要能够在其中创建一个新组件，但它的样式看起来像是一个新面板在主面板集合中。有任何想法吗？我在下面提供了一个模板笔。

Codepen Link

<section id="panel-container">
  <div class="panel" style="border:1px solid red;"></div>
  <div class="panel" style="border:1px solid red;">
    <div class="sub-panel" style="border:4px solid cyan;"></div>
  </div>
</section>

Answer 1

你可以混合使用flexbox和position

*,
*::before,
*::after {
  box-sizing: border-box
}

body {
  margin: 0
}

#panel-container {
  overflow-x: hidden;
  height: 100vh;
  border: 1px solid black;
  display: flex;
}

.panel {
  flex: 0 450px;
  height: 100vh;
  display: flex;
  border: 1px solid red;
  position: relative;
}

.sub-panel {
  position: absolute;
  top: 0;
  left: 450px;
  width: 450px;
  height: 100vh;
  border: 4px solid cyan;
}

<section id="panel-container">
  <div class="panel"></div>
  <div class="panel">
    <div class="sub-panel"></div>
  </div>
</section>