设置position:absolute时如何实现响应式效果？笔记本界面适配问题

你当前出现元素重叠、无法适配容器的核心原因是使用position:absolute的.paper/.paper-left没有父级定位上下文，宽高百分比基于全局视口计算，而非所属的左右栏容器。

1. 补充定位上下文修正适配问题 #

给.left-pane、.right-pane添加相对定位，让内部纸张的尺寸、定位都基于父容器计算，不会随屏幕尺寸乱跑：

.left-pane, .right-pane {
  position: relative;
  /* 高度自动适配剩余视口空间，减去顶部导航高度 */
  height: calc(100vh - 66px);
  padding-top: 66px;
  box-sizing: border-box;
}

调整纸张的宽高和定位，保证在父容器内居中且不会溢出：

.paper, .paper-left {
  width: 90%;
  height: 90%;
  /* 基于父容器居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 修正左页翻转的属性冲突 */
.paper-left {
  transform: translate(-50%, -50%) scaleX(-1);
}

同时修复顶部导航横向溢出的问题：

.top-nav {
  min-width: unset;
  width: calc(100vw - 180px);
}

2. 移动端差异化布局实现 #

通过媒体查询直接调整结构布局，实现和桌面端完全不同的展示效果：

@media (max-width: 768px) {
  /* 适配侧边栏收起宽度 */
  .left-nav {
    width: 52px !important;
  }
  .top-nav {
    left: 52px;
    width: calc(100vw - 52px);
  }
  .book {
    padding-left: 52px;
  }
  /* 移动端隐藏左页，单页展示 */
  .left-pane {
    display: none;
  }
  .right-pane {
    width: 100%;
  }
  .paper {
    width: 94%;
    height: 94%;
  }
}

3. 装订金属环实现 #

无需额外添加DOM，直接在.book容器上添加伪元素实现，定位在两页中间位置，不影响现有结构：

.book {
  position: relative;
}
.book::before {
  content: '';
  position: absolute;
  /* 定位在两页中间缝隙 */
  left: 50%;
  transform: translateX(-50%);
  top: 66px;
  bottom: 0;
  width: 22px;
  z-index: 10;
  /* 金属环+打孔效果 */
  background: 
    radial-gradient(circle, transparent 8px, #9e9e9e 9px, #cfcfcf 12px, #9e9e9e 14px, transparent 15px) 0 0 / 100% 40px repeat-y,
    linear-gradient(to right, #888, #eee 50%, #888);
}

修改后你页面内原有的打孔线、横线参考线都是基于纸张本身的绝对定位，不需要调整任何属性，会随纸张自适应缩放。

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