How to change the position of div with css

You can use position in css to position the div to change the position of the div. The meaning of the position attribute value:

static: The element box is generated normally. Block-level elements create a rectangular box as part of the document flow, while inline elements create one or more line boxes that are placed within their parent element.

relative: The element box is offset by a certain distance. The element retains its unpositioned shape and the space it originally occupied.

absolute: The element box is completely removed from the document flow and positioned relative to its containing block. The containing block may be another element in the document or the initial containing block. The space previously occupied by the element in normal document flow is closed, as if the element did not exist. The element generates a block-level box after positioning, regardless of what type of box it originally generated in the normal flow.

fixed: The element box behaves like setting position to absolute, except that its containing block is the window itself.

Tip: Relative positioning is actually considered part of the normal flow positioning model, because an element's position is relative to its position in the normal flow.

Experimental case:

1. Adjust the position of a div by setting the position value of a div. Simple code example As follows:

body>
    <div id="div2"></div>
    <style>
        div{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: absolute;
            right: 200px;
            bottom: 200px;
        }
    </style>
</body>

2. Set a div with a width and height of 200 pixels, 200 pixels from the right side of the body and 200 pixels from the bottom.

The above is the detailed content of How to change the position of div with css. For more information, please follow other related articles on the PHP Chinese website!