我试图创建一个日历上的事件，这里是我的代码片段：

div#planning {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
}

#planning .heure {
  border: 1px solid #aaa;
  width: 100px;
  height: 35px;
  margin: -0.9px 0 0 -0.9px;
  position: relative;
  box-sizing: border-box;
}

#planning>.jour {
  width: unset;
  max-width: unset;
}

#planning>.jour:before {
  content: attr(data-header);
  font-size: 12px;
  background: #919293;
  color: #fff;
  position: relative;
  top: -6px;
  padding: 0 5px;
  border-radius: 3px;
}

#planning>.jour:first-child {
  margin-left: 24px;
}

.jour:first-child .heure:before {
  content: attr(data-header);
  position: absolute;
  left: -5px;
  top: -7px;
  transform: translateX(-100%);
  font-size: 12px;
}

.horaire {
  position: absolute;
  width: 100%;
  left: 0;
  background: #00adff;
  opacity: 0.5;
}

.jour>div {
  position: relative;
  background: #fff;
}

#formhoraires .miniform input {
  width: 60px;
}

#collaborateur .miniform {
  width: unset;
  margin-top: 10px;
}

div#horaires {
  min-height: unset;
}

<div id="planning" class="form vertical">
  <div class="jour" data-header="mer.01/03">
    <div>
      <div class="heure" data-header="7h"></div>
      <div class="heure" data-header="8h"></div>
      <div class="heure" data-header="9h"></div>
      <div class="heure" data-header="10h"></div>
      <div class="heure" data-header="11h"></div>
      <div class="heure" data-header="12h"></div>
      <div class="heure" data-header="13h"></div>
      <div class="heure" data-header="14h"></div>
      <div class="heure" data-header="15h"></div>
      <div class="heure" data-header="16h"></div>
      <div class="heure" data-header="17h"></div>
      <div class="heure" data-header="18h"></div>
      <div class="heure" data-header="19h"></div>
      <div class="heure" data-header="20h"></div>
      <div class="horaire" style="top:0px;height:140px"></div>
      <div class="horaire" style="top:420px;height:35px"></div>
    </div>
  </div>
  <div class="jour" data-header="jeu.02/03">
    <div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="horaire" style="top:70px;height:140px"></div>
    </div>
  </div>
  <div class="jour" data-header="ven.03/03">
    <div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="horaire" style="top:35px;height:140px"></div>
    </div>
  </div>
  <div class="jour" data-header="sam.04/03">
    <div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
    </div>
  </div>
  <div class="jour" data-header="dim.05/03">
    <div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="horaire" style="top:35px;height:140px"></div>
    </div>
  </div>
  <div class="jour" data-header="lun.06/03">
    <div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="horaire" style="top:0px;height:140px"></div>
    </div>
  </div>
  <div class="jour" data-header="mar.07/03">
    <div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="heure"></div>
      <div class="horaire" style="top:35px;height:105px"></div>
      <div class="horaire" style="top:420px;height:35px"></div>
    </div>
  </div>
</div>

小提琴：https://jsfiddle.net/0sL1pufa/
正如您所看到的，类为horaire的div在不在顶部时有一个错误偏移，我测量了.heure div具有精确的指定高度，但.horaire div不在指定的y位置。
由于.heure div为35个像素，因此top值为420px的.horaire div应正好位于第12行。