CSS Positioning (positioning)

The CSS positioning (positioning) property allows you to position elements.

CSS Positioning and floating

CSS provides properties for positioning and floating, which allow you to set up a column layout, overlap parts of the layout with another part, and complete tasks that you typically need to work with multiple tables over the years.

The basic idea of positioning 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. Obviously, this is a very powerful and surprising feature. It should not be surprising to know that user-agent support for targeting in CSS2 is far better than support for other areas.

On the other hand, floating was first proposed in CSS1, which is based on a function added by Netscape in the initial phase of WEB development. Floating is not exactly a positioning, however, it is certainly not a normal flow layout. We will clear the meaning of the float in later chapters.

Everything is a box

Div, H1, or p elements are often referred to as block-level elements. This means that these elements appear as a piece of content, the "block box". In contrast, elements such as span and strong are called "inline elements," because their content is displayed in the row, which is the "inline box."

You can use the Display property to change the type of box that is generated. This means that by setting the display property to block, inline elements (such as the <a> element) behave like block-level elements. You can also set the display to none so that the generated elements do not have a box at all. In this case, the box and all its contents are no longer displayed and do not occupy 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 the text is not defined as a paragraph, it is treated as a paragraph:

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

In this case, this box is called the Nameless block box because it is not associated with a specially defined element.

A similar situation can occur with the text line of a block-level element. Suppose you have a paragraph that contains three lines of text. Each line of text forms a nameless box. You cannot apply a style directly to a nameless block or a row box, because there is no place to apply the style (note that the row and inline boxes are two concepts). However, it helps to understand that everything you see on the screen forms some kind of box.

CSS positioning mechanism

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML.

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

The inline box is arranged horizontally in a row. You can use horizontal padding, borders, and margins to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box.

In the following chapters, we will give you a detailed explanation of relative positioning, absolute positioning, and floating.

CSS Position Properties

By using the Position property, we can select 4 different types of positioning, which affects how the element box is generated.

Position the meaning of the property value:

Static

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.

Relative

The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

Absolute

The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

Fixed

The element box behaves like the position is set to absolute, but its containing block is the window itself.

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

Instance

Positioning: Relative positioning

This example shows how to position a element relative to its normal position.

Positioning: Absolute Positioning

This example demonstrates how to use an absolute value to position an element.

Positioning: Fixed positioning

This example demonstrates how to position an element relative to a browser window.

To set the top edge of an image using fixed values

This example shows how to set the top edge of an image using fixed values.

Set the top edge of an image using percentages

This example shows how to set the top edge of an image using percent values.

Set the bottom edge of an image using pixel values

This example shows how to set the bottom edge of an image using pixel values.

Use percentages to set the bottom edge of an image

This example shows how to set the bottom edge of an image using percent values.

Set the left edge of an image using fixed values

This example shows how to set the left edge of an image using a fixed value.

Set the left edge of an image using percentages

This example shows how to set the left edge of an image using percent values.

Set the right edge of an image using fixed values

This example shows how to set the right edge of an image using fixed values.

Set the right edge of an image using percentages

This example shows how to set the right edge of an image using percent values.

How to use scroll bars to display content that overflows within an element

This example shows how to set an overflow property to specify a corresponding action when the element content is too large to exceed the specified area.

How to hide overflow content in overflow elements

This example shows how to set the overflow property to hide its contents when the content in the element is too large to fit within the specified range.

How to set up a browser to handle overflow automatically

This example shows how to set up a browser to handle overflows automatically.

Set the shape of an element

This example shows how to set the shape of an element. This element is clipped into this shape and is displayed.

Vertically arranged images

This example shows how to arrange the images vertically in the text.

Z-index

Z-index can be used after one element is placed on another element.

Z-index

The elements in the above example have changed the Z-index.

CSS Positioning Properties

CSS positioning properties allow you to position elements.

Properties	Description
Position	Place the element in a static, relative, absolute, or fixed position.
Top	Defines the offset between the top margin boundary of an anchored element and the upper boundary of its containing block.
Right	Defines the offset between the right margin boundary of the anchored element and the right boundary of its containing block.
Bottom	Defines the offset between the margin boundary beneath the anchor element and the lower boundary of its containing block.
Left	Defines the offset between the left margin boundary of the anchored element and the left boundary of its containing block.
Overflow	Sets what happens when the content of an element overflows its area.
Clip	Sets the shape of the element. The element is cut into the shape and then displayed.
Vertical-align	Sets the vertical alignment of the element.
Z-index	Sets the stacking order of elements.