How to position css child elements relative to parent elements?

In CSS, you can use the position attribute to achieve the relative positioning of child elements relative to their parent by setting the relative positioning "position:relative;" style for the parent element and the absolute positioning "position:absolute;" style for the child element. Element positioning.

The operating environment of this tutorial: windows7 system, css2 version. This method is suitable for all brands of computers.

Related recommendations: "Programming Video Course"

How to implement positioning of child elements relative to parent elements in css

Parent Level element style settings:

position:relative;

Child element style:

position:absolute;

Sample 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

The browser renders HTML, which is called document flow, and block-level elements Line wrap rendering, inline element inline rendering, here, two divs are block-level elements, one parent and one child. The normal 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 must use the position attribute.

position attribute value

Attribute value	Description
absolute	Generate an absolutely positioned element, positioned relative to the first parent element other than static positioning.
relative	Generates a relatively positioned element, positioned relative to its normal position.

We know that to use positioning relative to the parent element, absolute must be used. Why does using absolute directly not work? Because absolute is used to position 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 for elements upward until you can find an element whose position is not static. This element is positioned relatively, so you need to set the position of the parent element to relative. This has no effect, because relative is only positioned relative to the normal position, which is the so-called default output position of the document flow. If we Setting position to relative without setting offsets x and y means that the position of the parent element has not changed.

If you want to read more related articles, please visit PHP Chinese website! !

The above is the detailed content of How to position css child elements relative to parent elements?. For more information, please follow other related articles on the PHP Chinese website!