代码之家 › 专栏 › 技术社区 › Entretoize

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

css html

Entretoize · 技术社区 · 3 年前

我正在尝试创建一个包含事件的日历,以下是我的代码片段:

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/

正如你所看到的,div和类 horaire 当它们不在顶部时具有误差偏移。我测量了一下 .heure div具有完全指定的高度,但是 .horaire div不在指定的y位置。

作为 .赫尔 div是35个像素 .荷莱尔 带有的div top 的值 420px 应该正好在第12排。

2 回复 | 直到 3 年前

tony 3 年前

这是因为您将页边空白添加到 #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;
}