CSS provides some attributes for positioning and floating. With these attributes, you can create a column layout, overlap one part of the layout with another, and complete tasks that usually require multiple tables for many years.
The basic idea of positioning is very simple. It allows you to define the position where the element box should appear relative to its normal position, or relative to the parent element, another element or even browser The position of the window itself. Obviously, this function is very powerful and surprising. It should not be surprising to know that user agents support positioning in CSS2 far more than other aspects.
On the other hand, floating is first proposed in CSS 1, which is based on a function added by Netscape at the early stage of Web development. Floating is not exactly positioning, but it is certainly not a normal flow layout. We will clarify the meaning of floating in the following chapters.
Everything is a box
The div, h1, or p elements are often referred to as block level elements. This means that these elements are displayed as one piece of content, that is, a "block box". On the contrary, elements such as span and strong are called "inline elements" because their contents are displayed in lines, that is, "inline boxes".
You can use the display property to change the type of the generated box. This means that by setting the display attribute to block, the inline elements (such as
Element) behaves like a block level element. You can also set display to none to make the generated element have no box at all. In this way, the box and all its contents will no longer be displayed and will not occupy the space in the document.
However, in one case, block level elements are created even if they are not explicitly defined. This happens when you add some text to the beginning of a block level element (such as a div). Even if these texts are not defined as paragraphs, they will be treated as paragraphs:
<div>
some text
<p>Some more text.</ p>
</div>
In this case, this box is called a nameless block box because it is not associated with a specially defined element.
A similar situation occurs for text lines of block level elements. Suppose you have a paragraph with three lines of text. Each line of text forms an unnamed box. You cannot apply styles directly to unnamed blocks or row boxes because there is no place where you can apply styles (note that row boxes and inline boxes are two concepts). However, it helps to understand that everything you see on the screen forms some kind of frame.
CSS positioning mechanism
CSS has three basic positioning mechanisms: ordinary flow, floating and absolute positioning.
Unless specifically specified, all boxes are positioned in the normal flow. That is, the position of an element in a normal stream is determined by its position in X (HTML).
Block level boxes are arranged one by one from top to bottom. The vertical distance between boxes is calculated from the vertical outer margin of the box.
The inner row frame is arranged horizontally in a row. You can adjust their spacing using the horizontal inner margin, border, and outer margin. However, the vertical inside margin, border, and outside margin do not affect the height of the inline box. The horizontal box formed by one line is called Line Box, and the height of the 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.
Next, we will explain relative positioning, absolute positioning and floating in detail.
CSS position attribute
By using the position attribute, we can select different types of positioning in 4, which will affect the way the element box is generated.
Meaning of the position attribute value:
static
The element box is generated normally. The block level element generates a rectangular box as part of the document flow, and the inline element will create one or more line boxes and place them in its parent element.
relative
The element box is offset by a certain distance. The element still retains its shape before it was positioned, and the space it originally occupied remains.
absolute
The element box is completely removed from the document stream and positioned relative to its containing block. The include block may be another element in the document or the initial include block. The space occupied by the element in the normal document stream will be closed, as if the element did not exist. After the element is positioned, a block level box is generated, regardless of what type of box it originally generated in the normal flow.
fixed
The element box behaves similarly to setting the position to absolute, but its containing block is the window itself.
Tip: Relative positioning is actually regarded as a part of the general flow positioning model, because the position of the element is relative to its position in the general flow.
CSS Positioning Properties
CSS positioning properties allow you to position elements.
Attribute Description
Position places the element in a static, relative, absolute, or fixed position.
Top defines the offset between the upper margin boundary of a positioning element and the upper boundary of its containing block.
Right defines the offset between the right outer margin boundary of the positioning element and the right boundary of its containing block.
Bottom defines the offset between the lower outer margin boundary of the positioning element and the lower boundary of its containing block.
Left defines the offset between the left outer margin boundary of the positioning element and the left boundary of its containing block.
Overflow sets what happens when the content of an element overflows its region.
Clip sets the shape of the element. Elements are cut into the shape and then displayed.
Vertical align sets the vertical alignment of elements.
Z-index sets the stacking order of elements.
