Detailed explanation of CSS child element fixed positioning solution relative to parent element

Basic Concepts

Absolute positioning: An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or the initial containing block. The space that the element previously occupied in the normal document flow is closed, as if the element did not exist. A positioned element generates a block-level box, regardless of what type of box it would otherwise generate in the normal flow.

https://www.w3school.com.cn/css/css_positioning_absolute.asp

Relative positioning: The element box set to relative positioning will be offset by a certain distance. The element retains its unpositioned shape and the space it originally occupied is preserved.

https://www.w3school.com.cn/css/css_positioning_relative.asp

Problem Analysis

An absolutely positioned element is positioned relative to its nearest positioned ancestor. If the element has no positioned ancestor, then it is positioned relative to its initial containing block.

The main thing with positioning is to remember what each one means. So, let's review what we've learned: relative positioning is relative to the element's initial position in the document, while absolute positioning is relative to the nearest positioned ancestor, or if there is no positioned ancestor, the initial containing block.

Note: Depending on the user agent, the initial containing block may be the canvas or an HTML element.

Tip: Because absolutely positioned boxes are independent of the document flow, they can overlap other elements on the page. You can control the stacking order of these boxes by setting the z-index property.

Solution

<div class="assistor">
  <div class="parent">
    <div class="child"></div>
    <div class="placeholder"></div>
  </div>
</div>

<style>
.assistor {
  position: relative; /*key point*/
  display: block;
  width: 500px;
  height: 300px;
  margin: 100px auto 0 auto;
  background-color: #ddd;
}
.parent {
  width: 500px;
  height: 300px;
  background-color: #888;
  overflow: auto; /*Key point*/
}
.child {
  position: absolute; /*key point*/
  width: 120px;
  height: 120px;
  margin: 100px 50px;
  background-color: #333;
}
.placeholder {
  width: 1000px;
  height: 1000px;
}
<style>

The child is positioned relative to the assistantposition: absolute, and the content in the parent is responsible for displaying itself.

As long as assistant is the same size as parent, it will look like the child element is fixed relative to the parent element.

Specific principle: The element with position: absolute; will be positioned relative to the first ancestor element with position: relative; set the assistant to position: reletive;, the scroll bar is in the parent, position: fixed; and scrolling of the content in the parent is achieved.

References

https://www.cnblogs.com/qqfontofweb/p/7813718.html

This concludes this article on the detailed explanation of the CSS solution for fixed positioning of child elements relative to parent elements. For more relevant CSS fixed positioning content relative to parent elements, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!