Absolute positioning and relative positioning in CSS

1. Absolute positioning

The element does not have the Position property set, but it still has the position property and its value is static

An absolutely positioned element is removed from the document stream and is positioned relative to its nearest position property for absolute, relative, and fixed ancestor elements, and if there are no such ancestor elements, then the controls that were originally in the document flow are closed according to the browser location, Its cascade is determined by the Z-index property, when the object does not have margin (margin)

<div class= "Content" >    <div class= "Redblock" ></div></div>

. content{    width:1000px;    height:800px;    Margin:0 Auto;    border:1px solid #000;}. redblock{    width:300px;    height:300px;    Position:absolute;    top:200px;    left:200px;    background:red;}

The display effect is as follows

The red block element is not absolutely positioned relative to the black border element, but rather relative to the browser, because the parent element of the Red block position property is not absolute, relative, fixed

The solution is the parent element of the Red block position property is set to absolute, relative, fixed

. content{    width:1000px;    height:800px;    position:relative;    Margin:0 Auto;    border:1px solid #;}

Show effect

2. Relative positioning

Refer to Parent elements for positioning with top, right, bottom, left properties

. content{    width:1000px;    height:800px;    Margin:0 Auto;    border:1px solid #;}. redblock{    width:300px;    height:300px;    position:relative;    top:200px;    left:200px;    background:red;}

Effect, the red block is positioned relative to the black border

Relative positioning, if the parent element is set to padding, the child element is positioned relative to the content area of the parent element and does not contain padding

Note: Absolute positioning and relative positioning make the element a block-level element

Absolute positioning and relative positioning in CSS