绝对div不在相对div内的指定位置

问题描述 投票:0回答:1

我正在尝试创建一个带有事件的日历,这是我的代码片段:

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像素,一个
.horaire
值为
top
420px
div应该恰好在第12行。

html css
1个回答
1
投票

这是因为您要将 margin top 添加到

#planning .heure

#planning .heure {
    border: 1px solid #aaa;
    width: 100px;
    height: 35px;
    margin: -0.9px 0 0 -0.9px; <<<<<<<<<<<<<<<<<< top is -0.9 so you are pushing contect from top to bottom
    position: relative;
    box-sizing: border-box;
}
© www.soinside.com 2019 - 2024. All rights reserved.