CSS positioning (div + css)

CSS positioning and floating

CSS provides some attributes for positioning and floating. With these attributes, you can create a columnar layout that overlaps one part of the layout with the other, you can also complete tasks that require multiple tables for years.

The basic idea of positioning is simple. It allows you to define the position of an element box relative to its normal location, or relative to the parent element, another element, or even the browser window itself. Obviously, this feature is very powerful and surprising. It should be noted that the support of user agents for positioning in CSS2 is far better than that for other aspects.

Everything is framed

Div, h1, or p elements are often called block-level elements. This means that these elements are displayedContentBlock box ". In contrast, elements such as span and strong are called "in-row elements" because their content is displayed in the row, that is, "In-row boxes ".

You can use the display attribute to change the type of the generated box. This means that by setting the display attribute to block, you can make the elements (such as elements) in the row behave like block-level elements. You can also set display to none to make the generated elements have no boxes at all. In this way, the box and all its content are no longer displayed and do not occupy space in the document.

However, in one case, block-level elements are created even if no explicit definition is made. This occurs when some text is added to the beginning of a block-level element (such as a div. Even if these texts are not defined as paragraphs, they are treated as paragraphs.

CSS positioning mechanism

CSS has three basic Positioning Mechanisms: normal stream, floating, and absolute positioning.

Unless otherwise specified, all frames are located in the normal stream. That is to say, the element position in a normal stream is determined by the element position in (X) HTML.

Block-level boxes are arranged one by one from top to the next. The vertical distance between frames is calculated by the vertical margin of the boxes.

Horizontal layout of the lines in the box. You can use the horizontal padding, border, and margin to adjust their spacing. However, the vertical padding, border, and outer margin do not affect the height of the row's inner frame. The horizontal Box formed by a row is calledLine Box)The height of the line box is always enough to accommodate all the lines it contains. However, setting the Row Height can increase the height of the box.

The above text comes from the description of W3CSCHOOL. Many people only know why after reading it. The following is an example.

First, we will introduce the important attribute position for positioning.

Here we will only give a detailed introduction to the common default values static and relative and absolute positioning absolute used for relative positioning. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + examples/packages/6by2v/examples/bAtKGjyOe5 + examples/examples ++ examples + PC9wPgo8cD48L3A + large "brush: java; ">

It can be seen that they are relative to the positioning of the browser and do not affect each other.

Use position: relative at the same time

It can be seen that the first div is located relative to the browser, the left of the second div is still 100px, and the top is changed to 200px. This is because of the relative positioning, there is already an element above it, the top of the second div is based on the height occupied by the first div.

Use position: absolute first, and then use position: relative

It can be seen that the first div is still absolutely positioned by the browser. Although the second div is relative, it is not affected by the first div, but it is still located by the browser.

Use position: relative first, and then use position: absolute

This is exactly the same as the above one. We can conclude that if only one relative location is used, no matter how many Absolute locations are used, the element with relative positioning will not be affected by the absolute positioning element.

Use the default value static first, and then relative

The top value of the second div has changed to 200px.

Use the default value static first, and then use absolute

The second div still ignores any other positioning elements and always uses the browser as the standard.

Ps: if we don't want to use the browser as the absolute positioning point, but use a block-level element defined by ourselves as the starting point, we only need to set this element as a relative location, then its sub-elements will use it for any positioning, instead of the browser.

For example:

Position: relative is set for all the grass green boxes here. The small boxes in the box refer to it for positioning.