CSS Positioning

The CSS Positioning (Positioning) attribute allows you to position elements.

CSS Positioning and Floating

CSS provides some properties for positioning and floating, with these properties, it is possible to establish column layouts, overlap part of the layout with another part, and also complete tasks that have traditionally required 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 the browser window itself. It is obvious that this feature is very powerful and also surprising. To know, the user agent's support for positioning in CSS2 is much better than that for other aspects, which should not be surprising.

On the other hand, the concept of floating was first proposed in CSS1, which is based on a feature added by Netscape in the early days of Web development. Floating is not entirely positioning, but of course, it is also not a normal flow layout. We will clarify the meaning of floating in the following chapters.

Everything is a box

Elements such as div, h1, or p are often called block-level elements. This means that these elements are displayed asA block of contentwhich is called 'block box'. Conversely, elements such as span and strong are called 'inline elements' because their content is displayed in a line, that is, 'inline box'.

You can use display attributeChange the type of the generated box. This means that by setting the display property to block, inline elements (such as <a> elements) can be made to behave like block-level elements. It is also possible to set display to none to make the generated element have no box. In this way, the box and all its content will no longer be displayed and will not occupy space in the document.

But in one case, even without explicit definition, a block-level element will be created. This happens 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 will be treated as paragraphs:

<div>
some text
<p>Some more text.</p>
</div>

In this case, this box is called an anonymous block box because it is not associated with any specifically defined element.

The text lines of block-level elements will also have a similar situation. Suppose there is a paragraph containing three lines of text. Each line of text forms an anonymous box. Styles cannot be directly applied to anonymous blocks or line boxes because there is no place to apply styles (note that line boxes and inline boxes are two different concepts). However, this helps to understand that everything we see on the screen forms some kind of box.

CSS Positioning Mechanism

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

Unless specifically specified, all boxes are positioned in the normal flow. That is, the position of elements in the normal flow is determined by the position of the elements 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 outer margin of the boxes.

Inline boxes are horizontally arranged in a line. Horizontal inner padding, borders, and margins can be used to adjust their spacing. However, vertical inner padding, borders, and margins do not affect the height of the inline box. The horizontal box formed by a line is calledLine Box (Line Box)The height of the line box is always sufficient to accommodate all the inline boxes it contains. However, setting line height can increase the height of this box.

In the following chapters, we will explain in detail relative positioning, absolute positioning, and floating for you.

CSS position Property

By using position attributeWe can choose 4 different types of positioning, which will affect the way the element box is generated.

The meaning of the position attribute value:

static
The element box is normally generated. Block-level elements generate a rectangular box as part of the document flow, while inline elements will create one or more line boxes, placed within their parent element.
relative
The element box offsets a certain distance. The element still maintains its shape before it is positioned, and the space it originally occupied is still retained.
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 originally occupied by the element in the normal document flow is closed, as if the element did not originally 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 like setting position to absolute, but its containing block is the viewport itself.

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

Example

Positioning: Relative positioning
This example demonstrates how to position an element relative to its normal position.
Positioning: Absolute positioning
This example demonstrates how to position an element using absolute values.
Positioning: Fixed positioning
This example demonstrates how to position an element relative to the browser window.
Set the top edge of an image using fixed values
This example demonstrates how to set the top edge of an image using fixed values.
Set the top edge of an image using percentages
This example demonstrates how to set the top edge of an image using percentage values.
Set the bottom edge of an image using pixel values
This example demonstrates how to set the bottom edge of an image using pixel values.
Set the bottom edge of an image using percentages
This example demonstrates how to set the bottom edge of an image using percentage values.
Set the left edge of an image using fixed values
This example demonstrates how to set the left edge of an image using fixed values.
Set the left edge of an image using percentages
This example demonstrates how to set the left edge of an image using percentage values.
Set the right edge of an image using fixed values
This example demonstrates how to set the right edge of an image using fixed values.
Set the right edge of an image using percentages
This example demonstrates how to set the right edge of an image using percentage values.
How to use scrollbars to display the overflow content within an element
This example demonstrates how to set the overflow property to specify the corresponding action when the element content is too large to exceed the specified area.
How to hide the overflow content in an overflow element
This example demonstrates how to set the overflow property to hide the content when the content of an element is too large to fit the specified area.
How to set the browser to automatically handle overflow
This example demonstrates how to set the browser to automatically handle overflow.
Set the shape of an element
This example demonstrates how to set the shape of an element. This element is clipped to this shape and displayed.
Vertical alignment of images
This example demonstrates how to vertically align images in text.
Z-index
Z-index can be used to place an element after another element.
Z-index
The element in the above example has changed the Z-index.

CSS Positioning Attributes

CSS positioning attributes allow you to position elements.

Attribute Description
position Place an element in a static, relative, absolute, or fixed position.
top Defined the offset between the top outer margin boundary of a positioned element and the top boundary of the containing block.
right Defined the offset between the right outer margin boundary of the positioned element and the right boundary of the containing block.
bottom Defined the offset between the bottom outer margin boundary of the positioned element and the bottom boundary of the containing block.
left Defined the offset between the left outer margin boundary of the positioned element and the left boundary of the containing block.
overflow Set what happens when the content of an element overflows its area.
clip Set the shape of elements. Elements are cut into this shape and then displayed.
vertical-align Set the vertical alignment of elements.
z-index Set the stacking order of elements.