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

huangapple go评论67阅读模式
英文:

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

  1. div#planning {
  2. display: flex;
  3. flex-flow: row;
  4. justify-content: flex-start;
  5. align-items: flex-start;
  6. overflow-x: auto;
  7. overflow-y: hidden;
  8. }
  9. #planning .heure {
  10. border: 1px solid #aaa;
  11. width: 100px;
  12. height: 35px;
  13. margin: -0.9px 0 0 -0.9px;
  14. position: relative;
  15. box-sizing: border-box;
  16. }
  17. #planning&gt;.jour {
  18. width: unset;
  19. max-width: unset;
  20. }
  21. #planning&gt;.jour:before {
  22. content: attr(data-header);
  23. font-size: 12px;
  24. background: #919293;
  25. color: #fff;
  26. position: relative;
  27. top: -6px;
  28. padding: 0 5px;
  29. border-radius: 3px;
  30. }
  31. #planning&gt;.jour:first-child {
  32. margin-left: 24px;
  33. }
  34. .jour:first-child .heure:before {
  35. content: attr(data-header);
  36. position: absolute;
  37. left: -5px;
  38. top: -7px;
  39. transform: translateX(-100%);
  40. font-size: 12px;
  41. }
  42. .horaire {
  43. position: absolute;
  44. width: 100%;
  45. left: 0;
  46. background: #00adff;
  47. opacity: 0.5;
  48. }
  49. .jour&gt;div {
  50. position: relative;
  51. background: #fff;
  52. }
  53. #formhoraires .miniform input {
  54. width: 60px;
  55. }
  56. #collaborateur .miniform {
  57. width: unset;
  58. margin-top: 10px;
  59. }
  60. div#horaires {
  61. min-height: unset;
  62. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;planning&quot; class=&quot;form vertical&quot;&gt;
  2. &lt;div class=&quot;jour&quot; data-header=&quot;mer.01/03&quot;&gt;
  3. &lt;div&gt;
  4. &lt;div class=&quot;heure&quot; data-header=&quot;7h&quot;&gt;&lt;/div&gt;
  5. &lt;div class=&quot;heure&quot; data-header=&quot;8h&quot;&gt;&lt;/div&gt;
  6. &lt;div class=&quot;heure&quot; data-header=&quot;9h&quot;&gt;&lt;/div&gt;
  7. &lt;div class=&quot;heure&quot; data-header=&quot;10h&quot;&gt;&lt;/div&gt;
  8. &lt;div class=&quot;heure&quot; data-header=&quot;11h&quot;&gt;&lt;/div&gt;
  9. &lt;div class=&quot;heure&quot; data-header=&quot;12h&quot;&gt;&lt;/div&gt;
  10. &lt;div class=&quot;heure&quot; data-header=&quot;13h&quot;&gt;&lt;/div&gt;
  11. &lt;div class=&quot;heure&quot; data-header=&quot;14h&quot;&gt;&lt;/div&gt;
  12. &lt;div class=&quot;heure&quot; data-header=&quot;15h&quot;&gt;&lt;/div&gt;
  13. &lt;div class=&quot;heure&quot; data-header=&quot;16h&quot;&gt;&lt;/div&gt;
  14. &lt;div class=&quot;heure&quot; data-header=&quot;17h&quot;&gt;&lt;/div&gt;
  15. &lt;div class=&quot;heure&quot; data-header=&quot;18h&quot;&gt;&lt;/div&gt;
  16. &lt;div class=&quot;heure&quot; data-header=&quot;19h&quot;&gt;&lt;/div&gt;
  17. &lt;div class=&quot;heure&quot; data-header=&quot;20h&quot;&gt;&lt;/div&gt;
  18. &lt;div class=&quot;horaire&quot; style=&quot;top:0px;height:140px&quot;&gt;&lt;/div&gt;
  19. &lt;div class=&quot;horaire&quot; style=&quot;top:420px;height:35px&quot;&gt;&lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;/div&gt;
  22. &lt;div class=&quot;jour&quot; data-header=&quot;jeu.02/03&quot;&gt;
  23. &lt;div&gt;
  24. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  25. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  26. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  27. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  28. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  29. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  30. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  31. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  32. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  33. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  34. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  35. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  36. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  37. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  38. &lt;div class=&quot;horaire&quot; style=&quot;top:70px;height:140px&quot;&gt;&lt;/div&gt;
  39. &lt;/div&gt;
  40. &lt;/div&gt;
  41. &lt;div class=&quot;jour&quot; data-header=&quot;ven.03/03&quot;&gt;
  42. &lt;div&gt;
  43. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  44. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  45. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  46. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  47. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  48. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  49. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  50. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  51. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  52. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  53. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  54. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  55. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  56. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  57. &lt;div class=&quot;horaire&quot; style=&quot;top:35px;height:140px&quot;&gt;&lt;/div&gt;
  58. &lt;/div&gt;
  59. &lt;/div&gt;
  60. &lt;div class=&quot;jour&quot; data-header=&quot;sam.04/03&quot;&gt;
  61. &lt;div&gt;
  62. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  63. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  64. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  65. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  66. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  67. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  68. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  69. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  70. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  71. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  72. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  73. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  74. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  75. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  76. &lt;/div&gt;
  77. &lt;/div&gt;
  78. &lt;div class=&quot;jour&quot; data-header=&quot;dim.05/03&quot;&gt;
  79. &lt;div&gt;
  80. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  81. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  82. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  83. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  84. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  85. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  86. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  87. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  88. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  89. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  90. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  91. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  92. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  93. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  94. &lt;div class=&quot;horaire&quot; style=&quot;top:35px;height:140px&quot;&gt;&lt;/div&gt;
  95. &lt;/div&gt;
  96. &lt;/div&gt;
  97. &lt;div class=&quot;jour&quot; data-header=&quot;lun.06/03&quot;&gt;
  98. &lt;div&gt;
  99. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  100. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  101. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  102. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  103. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  104. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  105. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  106. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  107. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  108. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  109. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  110. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  111. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  112. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  113. &lt;div class=&quot;horaire&quot; style=&quot;top:0px;height:140px&quot;&gt;&lt;/div&gt;
  114. &lt;/div&gt;
  115. &lt;/div&gt;
  116. &lt;div class=&quot;jour&quot; data-header=&quot;mar.07/03&quot;&gt;
  117. &lt;div&gt;
  118. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  119. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  120. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  121. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  122. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  123. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  124. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  125. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  126. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  127. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  128. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  129. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  130. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  131. &lt;div class=&quot;heure&quot;&gt;&lt;/div&gt;
  132. &lt;div class=&quot;horaire&quot; style=&quot;top:35px;height:105px&quot;&gt;&lt;/div&gt;
  133. &lt;div class=&quot;horaire&quot; style=&quot;top:420px;height:35px&quot;&gt;&lt;/div&gt;
  134. &lt;/div&gt;
  135. &lt;/div&gt;
  136. &lt;/div&gt;

<!-- 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上添加了上边距。

  1. #planning .heure {
  2. border: 1px solid #aaa;
  3. width: 100px;
  4. height: 35px;
  5. margin: -0.9px 0 0 -0.9px; // 顶部是-0.9,所以你在从顶部向底部推动内容
  6. position: relative;
  7. box-sizing: border-box;
  8. }
英文:

Its because you are adding margin top to #planning .heure

  1. #planning .heure {
  2. border: 1px solid #aaa;
  3. width: 100px;
  4. height: 35px;
  5. margin: -0.9px 0 0 -0.9px; &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; top is -0.9 so you are pushing contect from top to bottom
  6. position: relative;
  7. box-sizing: border-box;
  8. }

huangapple
  • 本文由 发表于 2023年3月1日 16:20:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/75601102.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定