Question

The image above provides a visual for the following code

• The blue rectangle is the parent div.
• The red square is the child image.

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

As you can see, from a spatial perspective, the child element is outside of the parent, despite being a child element in the DOM.

Is this fair-use, according to the HTML overlords?

Answer 1

Many people uses fixed and absolute positions for positioning some elements, this is what positioning is for, generally these elements are out of the document flow, so it is absolutely fine that the child element is outside of the parent element, it makes no difference to the validation unless and until you use some invalid child element in your parent container.

For Example:

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

And always use position: relative; to your parent element so that the child doesn’t flow out in the wild.