html - 将 div 的子元素放置在 div 之外是否违反 HTML 规范？

Question

上图为以下代码提供了视觉效果

• 蓝色矩形是父 div。
• 红色方块是子图像。

 <!-- a centered fixed-width parent div -->
 <div style="position: relative; width: 400px; height: 200px; margin: 0px auto;">
    <img src="46px_square.jpg" style="position: absolute; top: -46px; left: -46px;" />
 </div>

如您所见，从空间角度来看，子元素位于父元素之外，尽管它是 DOM 中的子元素。

根据 HTML 霸主的说法，这是合理使用吗？

Answer 1

很多人使用fixed和absoluteposition来定位一些元素，这就是定位的作用，一般这些元素是在文档流child之外的，所以元素在元素之外是绝对可以的，与unless和untilparent没有区别validation您在父容器中使用了一些无效的子元素。

例如：

<p>
  <p>This won't pass your validation, no matter what positions you use for these element</p>
</p>

并始终使用position: relative;您的父元素，以免孩子在野外流淌。

Answer 2

是的，这是完全有效的，但您将使用 position:absolute.relative 让它们坐在适当的位置。当您想在移动设备上加载页面时，这会为页面创建一个警告。