How does CSS use the Position property to achieve the positioning effect? Introduction to 4 positioning methods in CSS (example)

Source: Internet
Author: User
What this article brings to you is about how CSS uses the Position property to achieve the positioning effect. CSS 4 positioning methods introduced (examples), there is a certain reference value, the need for friends can refer to, I hope to help you.

The basic idea of positioning in CSS is simple, allowing you to define where the element box should appear relative to its normal position, or relative to the parent element, another element, or even the location of the browser window itself. Here's how to use the CSS position property to achieve the positioning effect.

One: Static positioning (statics)

The element determines the arrangement of the elements in the order in which they are placed in HTML, by default positioning, and the elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations). The element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element. This element needs to be set position to static.

<! DOCTYPE html><html><head><meta charset= "Utf-8" ><title> element (static positioning) </title><style>.box{width:300px;overflow:hidden;padding: 10px;border:1px solid #000; margin:10px Auto;}. static {position:static;border:3px solid #007AFF;} </style></head><body><div class= "box" ><h2>position:static;</h2><p> use position:static; Positioned elements, no special positioning, follow normal document flow objects: </p><div class= "Static" > the element uses position:static;</div></div></ Body></html>

Here are the following:

II: Relative positioning (relative)

Relative positioning is considered as part of the normal flow positioning model, and the position of the positioned element can have values relative to its position in the normal flow top,left,bottom,right. Using a relatively positioned element, regardless of whether it is moving, the element still occupies its original page space and can be set to Z-index. The element that causes this element to be relative to the element in the document flow, or out of the document flow but the Z-index value is closer to the user's line of sight than the value of this element is smaller. The most important effect of relative positioning is to achieve an absolute positioning of an element relative to the upper-left corner of this element, this element needs to be set position to relative.

<! DOCTYPE html><html><head><meta charset= "Utf-8" ><title> element (relative positioning) </title><style>.box{width:300px;overflow:hidden;padding: 10px;border:1px solid #000; margin:10px Auto;}. box1{        background-color:red;        width:100px;        height:100px;    }    . box2{        Background-color:yellow;        width:100px;        height:100px;        position:relative;        left:20px;    }    . box3{        Background-color:blue;        width:100px;        height:100px;        position:relative;        right:20px;    } </style></head><body><div class= "box" >                        <h2>position:relative;</h2>< Div class= "Box1" > Normal position box </div><div class= "Box2" > box that moves to the left relative to its normal position </div><div class= "Box3" > box that moves to the right relative to its normal position </div></div></body></html>

Here are the following:

Relative positioning elements are often used as container blocks for absolutely positioned elements.

Three: Absolute positioning (absolute)

The element that is given absolute positioning is dragged from its position in the normal stream and is absolutely positioned with the left, right, top, bottom, and so on, relative to the parent element closest to its closest location setting, if the parent of the element does not have a positional property set, the body The upper-left corner of the element is positioned as a reference. Absolute positioning elements can be stacked, stacking order can be controlled by the Z-index property, the Z-index value is no unit of integers, large in the above, can have negative values.

Absolute positioning method: If its parent element sets a location other than static, such as Position:relative or Position:absolute and position:fixed, it will be positioned relative to its parent element, The position is defined by the left, top, right, and bottom properties, and if its parent element is not positioned, then it depends on whether the parent element of the parent element has a set positioning, and if it does not continue to the ancestor elements of higher levels, In short, its positioning is relative to the setting of the first ancestor element in addition to the static positioning, if all ancestor elements do not have any of the above three positioning in one of the positioning, then it will be relative to the document body to locate.

<! DOCTYPE html><html><head><meta charset= "Utf-8" ><title> element (absolute positioning) </title><style>.box{width:300px;overflow:hidden;padding: 10px;border:1px solid #000;}. Div1 {    width:150px;    height:150px;    Background:yellow;}. div2 {    width:150px;    height:150px;    background:red;    top:150px;    left:100px;    Position:absolute;} </style></head><body><div class= "box" ><h2>position:absolute;</h2><div class= "DIV1" > Parent element    <div class= "div2" > child element </div></div></div></body></html >

Here are the following:

Iv. fixed positioning

Fixed positioning is similar to absolute positioning, but it is positioned relative to the browser window and does not scroll with the scroll bar.

One of the most common uses of fixed positioning is to create a fixed head, fixed foot, or fixed sidebar in the page without using margin, border, padding. This element needs to be set to fixed position.

Then the above is about the use of CSS position properties to achieve positioning effect of the specific introduction, with a certain reference value, I hope to have the help of friends! Read more about PHP in other related articles!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: