HTML和CSS：粘帖式覆盖

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%;的div设置为left时，我的right的div将被推到右侧。

我希望这有道理。日历ist滚动时，基本上应该是这样的：

（我通过滚动到正确的位置制作了此屏幕截图）

Answer 1

类名对我来说毫无意义：left包含时间轴，right包含项目。

下面的代码完成了您所描述的。我从relative中删除了位置right，使其从左侧开始，并在项目上添加了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>