Implementation of positioning CSS child elements relative to parent elements

Solution

Add position:relative to the parent element;
Add position:absolute; right:20px to the child element;

Code

HTML structure

<div id="div1">
	<div id="div2"></div>
</div>

CSS

#div1{
	width:500px;height:500px;
	background-color: darkgray;
	position:relative;
}
#div2{
	width:30px;height:30px;
	background-color:red;
	position:absolute;
	right:20px;
}

Effect

principle

When the browser renders HTML, there is a concept of document flow. Block-level elements are rendered on a new line, and inline elements are rendered inline. Here, the two divs are both block-level elements, one parent and one child. Normally, the rendering result is that the parent element is in the upper left corner of the browser, and the child element is in the upper left corner of the parent element.

If we want to position the child element relative to the parent element, we need to use the position attribute.
position Property Value

We know that to use positioning relative to the parent element, we must use absolute. Why doesn't using absolute directly work? Because absolute positioning is used relative to the parent element, there is a requirement for the parent element, that is, the position of the parent element cannot be static. If the position of the parent element is static, then continue to search upwards for elements until an element whose position is not static is found, and then position this element relatively. Therefore, it is necessary to set the position of the parent element to relative. This has no effect, because relative positioning is only relative to the normal position. The normal position is the so-called default output position of the document flow. If we set the position to relative without setting the offset x, y, it is equivalent to the position of the parent element not changing.

This is the end of this article about how to position child elements relative to their parent elements in CSS. For more information on positioning child elements relative to their parent elements in CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that you will support 123WORDPRESS.COM in the future!