How to use id for positioning in css

The id selector can specify a specific style for HTML elements marked with a specific id.

id selector is defined with "#". For the following two id selectors, the first one can define the color of the element as red, and the second one can define the color of the element as green:

#red {color:red;}
#green {color:green;}

In the following HTML code, the p element with the id attribute of red is displayed is red, and the p element whose id attribute is green is displayed in green.

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

Note: The id attribute can only appear once in each HTML document.

CSS provides some properties for positioning and floating. With these properties, you can create a column layout, overlap one part of the layout with another, and also do what has been commonly done over the years. Tasks that require the use of multiple forms.

The basic idea of ​​positioning is simple, it allows you to define where an element's box should appear relative to its normal position, or relative to a parent element, another element or even the browser window itself. Obviously, this feature is very powerful and surprising. It shouldn't be surprising to know that user agents support positioning in CSS2 much better than other aspects.

CSS positioning mechanism

CSS has three basic positioning mechanisms: normal flow, floating and absolute positioning.

All boxes are positioned in the normal flow unless specifically specified. That is, the position of an element in the normal flow is determined by the element's position in (X)HTML.

Block-level boxes are arranged one after another from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box.

Inline boxes are arranged horizontally in a row. Their spacing can be adjusted using horizontal padding, borders, and margins. However, vertical padding, borders, and margins do not affect the height of the inline box. The horizontal box formed by a line is called a line box. The height of a line box is always high enough to accommodate all the inline boxes it contains. However, setting the row height can increase the height of this box.

CSS position property

By using the position property, we can choose from 4 different types of positioning, which affects the way the element box is generated.

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.

The above is the detailed content of How to use id for positioning in css. For more information, please follow other related articles on the PHP Chinese website!