位置绝对时如何获得响应行为

Question

我试图模拟一个笔记本界面，当我使用绝对位置来绘制纸张指南和孔时，我在纸 div 中使用 postion:absolute，所以在桌面上很难获得响应。

这个想法是在 Desktop 中使用 2 张纸并在 Mobiel 中显示完整的不同布局，但是当我检查具有不同桌面屏幕尺寸的解决方案时，我会重叠，并且我很难将纸张尺寸调整到容器中。我想为纸张接头画一个金属环，并且想使用背景图像渐变，所以也需要使用绝对位置

Here is the Pen where im trying to solve it

body {
    margin: 0px;
    background-color: #e7eff8;
}

.container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.left-nav {
    display: flex;
    flex: 1 1 auto;
    visibility: visible;
    position: fixed;
    width: 52px;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 600;
    flex-direction: column;
    background-color: #133345;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;
    transition-property: width;
}

.right-area {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100vmax;
    background-color: #d3d3d3;
    flex-wrap: wrap;
}

.top-nav {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 66px;
    position: fixed;
    top: 0px;
    left: 180px;
    right: 0px;
    z-index: 301;
    min-width: 100vw;
    box-shadow: 0px -15px 21px;
}

.book {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 180px;
}

.right-pane {
    border-width: 1;
    width: 50%;
    padding-right: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e7eff8;
}

.left-pane {
    border-width: 1;
    width: 50%;
    background-color: #e7eff8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paper {
    display: flex;
    position: absolute;
    width: 43%;
    height: 80%;
    margin: 0 auto;
    background: #fafafa;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
    background-repeat: repeat-y;
}

.paper-left {
    display: flex;
    position: absolute;
    width: 43%;
    height: 80%;
    margin: 0 auto;
    background: #fafafa;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
    background-repeat: repeat-y;
 
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.paper:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 25%;
    background-color: #FFFFFF;
    background: radial-gradient(#e7eff8 6px, transparent 7px) repeat-y, radial-gradient(#575450 6px, transparent 7px) repeat-y;
    background-size: 30px 30px;
    border-right: 3px double #D44147;
    box-sizing: border-box;
}

.paper-left:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 25%;
    background-color: #FFFFFF;
    background: radial-gradient(#e7eff8 6px, transparent 7px) repeat-y, radial-gradient(#575450 6px, transparent 7px) repeat-y;
    background-size: 30px 30px;
    box-sizing: border-box;
}

.paper-notes {
    display: flex;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 30px;
    background: linear-gradient(transparent, transparent 29px, #CBE0F7 29px);
    background-size: 30px 30px;
    height: 100%;
}

.paper-notes-left {
    display: flex;
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0px;
    left: 30px;
    background: linear-gradient(transparent, transparent 29px, #CBE0F7 29px);
    background-size: 30px 30px;
    height: 100%;
}

.timecodes {
    color: mediumblue;
    font-family: 'Handlee', cursive;
    font-weight: bold;
    font-size: 18px;
    width: 21%;
    height: 100%;
}

<div class="container">
            <div class="left-nav pg-empty-placeholder" style="width: 180px;"></div>
            <div class="right-area">
                <div class="pg-empty-placeholder top-nav"></div>
                <div class="book">
                    <div class="left-pane">
                        <div class="paper-left">
                            <div class="paper-notes-left">
                            </div>
                        </div>
                    </div>
                    <div class="right-pane">
                        <div class="paper">
                            <div class="paper-notes">
                                <div class="timecodes"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

<style>
  body {
    margin: 0px;
    background-color: #e7eff8;
  }
  
  .container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
  }
  
  .left-nav {
    display: flex;
    flex: 1 1 auto;
    visibility: visible;
    position: fixed;
    width: 52px;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 600;
    flex-direction: column;
    background-color: #133345;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;
    transition-property: width;
  }
  
  .right-area {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100vmax;
    background-color: #d3d3d3;
    flex-wrap: wrap;
  }
  
  .top-nav {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 66px;
    position: fixed;
    top: 0px;
    left: 180px;
    right: 0px;
    z-index: 301;
    min-width: 100vw;
    box-shadow: 0px -15px 21px;
  }
  
  .book {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 180px;
  }
  
  .right-pane {
    border-width: 1;
    width: 50%;
    padding-right: 2;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #e7eff8;
  }
  
  .left-pane {
    border-width: 1;
    width: 50%;
    background-color: #e7eff8;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
  }
  
  .paper {
    display: flex;
    position: absolute;
    width: 43%;
    height: 80%;
    margin: 0 auto;
    background: #fafafa;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    overflow: hidden;
    background-repeat: repeat-y;
  }
  
  .paper-left {
    display: flex;
    position: absolute;
    width: 43%;
    height: 80%;
    margin: 0 auto;
    background: #fafafa;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    overflow: hidden;
    background-repeat: repeat-y;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
  }
  
  .paper:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 25%;
    background-color: #FFFFFF;
    background: radial-gradient(#e7eff8 6px, transparent 7px) repeat-y, radial-gradient(#575450 6px, transparent 7px) repeat-y;
    background-size: 30px 30px;
    border-right: 3px double #D44147;
    box-sizing: border-box;
  }
  
  .paper-left:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 25%;
    background-color: #FFFFFF;
    background: radial-gradient(#e7eff8 6px, transparent 7px) repeat-y, radial-gradient(#575450 6px, transparent 7px) repeat-y;
    background-size: 30px 30px;
    box-sizing: border-box;
  }
  
  .paper-notes {
    display: flex;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 30px;
    background: linear-gradient(transparent, transparent 29px, #CBE0F7 29px);
    background-size: 30px 30px;
    height: 100%;
  }
  
  .paper-notes-left {
    display: flex;
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0px;
    left: 30px;
    background: linear-gradient(transparent, transparent 29px, #CBE0F7 29px);
    background-size: 30px 30px;
    height: 100%;
  }
  
  .timecodes {
    color: mediumblue;
    font-family: 'Handlee', cursive;
    font-weight: bold;
    font-size: 18px;
    width: 21%;
    height: 100%;
  }
</style>
<div class="container">
  <div class="left-nav pg-empty-placeholder" style="width: 180px;"></div>
  <div class="right-area">
    <div class="pg-empty-placeholder top-nav"></div>
    <div class="book">
      <div class="left-pane">
        <div class="paper-left">
          <div class="paper-notes-left">
          </div>
        </div>
      </div>
      <div class="right-pane">
        <div class="paper">
          <div class="paper-notes">
            <div class="timecodes"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

使父 div 左窗格和右窗格和位置为相对。就这样！