Absolute div not at the specified position inside relative div

March 1, 2023

I’m trying to create a calendar with events on it, here is my code:

HTML:

<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>

CSS:


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;
}

Fiddle: https://jsfiddle.net/0sL1pufa/

As you can see the divs with the class horaire have an error offset when them are not at the top. I measured that the .heure divs have the exact specified height, but the .horaire divs are not at the specified y position.

As the .heure divs are 35 pixels, a .horaire div with a top value of 420px should be exactly on the 12th row.

>Solution :

Its because you are adding margin top to #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;
}