英文:
Absolute div not at the specified position inside relative div
问题
您可以看到具有类别 horaire 的 div 在不在顶部时有一个错误的偏移。我测量了 .heure div 具有精确指定的高度，但 .horaire div 不在指定的 y 位置。
由于 .heure div 的高度为 35 像素，top 值为 420px 的 .horaire div 应该恰好在第12行上。
如果您希望修复这个问题，您可以检查您的 CSS 和 HTML 代码，确保 top 属性的值正确，并且没有其他 CSS 规则或布局因素导致偏移。您还可以使用浏览器的开发工具来检查元素的计算样式，以了解实际的偏移值是如何计算的。
英文:
I'm trying to create a calendar with events on it, here is my code snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
<!-- language: lang-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>
<!-- end snippet -->
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.
答案1
得分: 1
这是因为你在#planning .heure上添加了上边距。
#planning .heure {
border: 1px solid #aaa;
width: 100px;
height: 35px;
margin: -0.9px 0 0 -0.9px; // 顶部是-0.9，所以你在从顶部向底部推动内容
position: relative;
box-sizing: border-box;
}
英文:
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;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论