HTML & CSS : Sticky as overlay

Question

我正在尝试创建类似日历应用程序的东西，但我在布局方面遇到了问题。

我想要一个可滚动的 div 和一些时间线叠加层。

这是我目前所拥有的:

.calendar {
  position: absolute;
  height: 80%;
  width: 80%;
  top: 0;
  left: 0;
  margin: 50px;
}

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.main {
  width: 2000px;
  height: 1050px;
  background-color: rosybrown;
  display: flex;
  flex-direction: column;
}

.top {
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: rgba(192, 244, 96, 0.658);
}

.main .middle {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}

.main .middle {
  position: relative;
  width: 100%;
  left: 0;
  background: rgba(255, 107, 49, 0.904);
}

.left {
  position: sticky;
  width: 50%;
  left: 0;
}

.lines {
  position: relative;
  width: 100%;
}

.line {
  position: absolute;

  border-top-style: solid;
  border-top-color: black;
  border-top-width: 1px;
  width: 100%;
}

.right {
  margin-left: 1rem;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: mediumvioletred
}

.items {
}

.item {
  position: absolute;
  width: 100px;
  height: 100px;
  background: maroon;
}

<div class="calendar">
  <div class="wrapper">
    <div class="main">
        <div class="top">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aspernatur eligendi dolorem perspiciatis nesciunt assumenda rem voluptas nam odit, modi optio quis dicta! Quibusdam, nisi qui porro laboriosam at eligendi! 
        </div>
        <div class="middle">
          <div class="left">
            <div class="lines">
              <div class="line" style="top: 100px;">Time</div>
              <div class="line" style="top: 300px;">Time</div>
              <div class="line" style="top: 500px;">Time</div>
              <div class="line" style="top: 900px;">Time</div>
              <div class="line" style="top: 1000px;">Time</div>              
            </div>
          </div>
          <div class="right">
            <div class="items">
              <div class="item" stlye="top: 300px"><div>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

我需要将 lines 作为“日历”的叠加层。但是当我将 width: 100%; 设置到 left div 时，我的 right div 被推到右边。

我希望这是有道理的。基本上它应该是这样的，当日历列表滚动时:

(我通过滚动到正确的位置制作了这个屏幕截图)

Answer 1

类名对我来说毫无意义:left 包含时间轴，right 包含元素。

下面的代码实现了您所描述的内容。我从 right 中删除了位置 relative 以使其从左侧开始并在元素上添加了 left: 0 以将元素移动到右侧地方。

.calendar {
  position: absolute;
  height: 80%;
  width: 80%;
  top: 0;
  left: 0;
  margin: 50px;
}

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.main {
  width: 2000px;
  height: 1050px;
  background-color: rosybrown;
  display: flex;
  flex-direction: column;
}

.top {
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: rgba(192, 244, 96, 0.658);
}

.main .middle {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}

.main .middle {
  position: relative;
  width: 100%;
  left: 0;
  background: rgba(255, 107, 49, 0.904);
}

.left {
  position: sticky;
  width: 50%;
  left: 0;
}

.lines {
  position: relative;
  width: 100%;
}

.line {
  position: absolute;

  border-top-style: solid;
  border-top-color: black;
  border-top-width: 1px;
  width: 100%;
}

.right {
  margin-left: 1rem;
  //position: relative;

  height: 100%;
  width: 100%;
  background-color: mediumvioletred
}

.items {
}

.item {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  background: maroon;
}

<div class="calendar">
  <div class="wrapper">
    <div class="main">
        <div class="top">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aspernatur eligendi dolorem perspiciatis nesciunt assumenda rem voluptas nam odit, modi optio quis dicta! Quibusdam, nisi qui porro laboriosam at eligendi! 
        </div>
        <div class="middle">
          <div class="left">
            <div class="lines">
              <div class="line" style="top: 100px;">Time</div>
              <div class="line" style="top: 300px;">Time</div>
              <div class="line" style="top: 500px;">Time</div>
              <div class="line" style="top: 900px;">Time</div>
              <div class="line" style="top: 1000px;">Time</div>              
            </div>
          </div>
          <div class="right">
            <div class="items">
              <div class="item" stlye="top: 300px"><div>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>