Posts in current category

CSS Positioning (positioning)


May 03, 2021 22:00 CSS


Table of contents


CSS Positioning (positioning).

The CSS position property, which allows you to overlap one part of the layout with another, and to accomplish tasks that typically require multiple tables over the years.


Positioning can be tricky at times!

Decide to display the element in front!

Elements can overlap!


Positioning (positioning)

The CSS positioning property allows you to position an element. It can also place one element behind another and specify what should happen if the contents of one element are too large.

Elements can be positioned using the top, bottom, left, and right properties. H owever, these properties do not work unless the position property is set in advance. They also work differently, depending on the positioning method.

There are four different positioning methods.


Static positioning

The default value for HTML elements, that is, no positioning, appears in a normal stream.

Statically positioned elements are not affected by top, bottom, left, right.


Fixed positioning

The position of the element is fixed relative to the browser window.

It does not move even if the window is scrolling:

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Try it out . . .

Note: F ixed positioning needs to be described under IE7 and IE8! DOCTYPE can be supported.

Fixed positioning makes the location of the element independent of the document flow and therefore does not take up space.

Fixed anchors overlap with other elements.


Relative positioning

The positioning of the relative positioning element is relative to its normal position.

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Try it out . . .

The contents of the relatively positioned element and the overlapping elements that can be moved do not change the space it originally occupies.

h2.pos_top
{
position:relative;
top:-50px;
}

Try it out . . .

Relative positioning elements are often used as container blocks for absolute positioning elements.


Absolute positioning

The position of the absolutely positioned element is relative to the most recently positioned parent element, and if the element does not have a positioned parent element, its position is relative to the .

h2
{
position:absolute;
left:100px;
top:150px;
}

Try it out . . .

Absolutely positioning makes the location of the element independent of the document flow and therefore does not take up space.

The elements positioned by Absolutely overlap with other elements.


Overlapping elements

Elements are positioned independently of the document flow, so they can override other elements on the page

The z-index property specifies the stacking order of an element (which element should be placed first, or after)

An element can have a stacking order of positive or negative numbers:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

Try it out . . .

Elements with a higher stacking order are always in front of lower stacking order elements.

Note: If two anchor elements overlap and no z-index is specified, the last anchor element in the HTML code will be displayed at the top.


CSS Positioning (positioning)

More instances

Crop the shape of the element

This example shows how to shape an element. The element is clipped into this shape and displayed.

How to use a scroll bar to display content that overflows within an element

This example shows how the overflow property creates a scroll bar that is set to fit when the contents of an element are too large in the specified area.

How to set up browser auto-overflow processing

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

Change the cursor

This example shows how to change the cursor.


All CSS positioning properties

The numbers in the "CSS" column indicate which CSS (CSS1 or CSS2) version defines the property.

Property Description Value Css
bottom Defines the offset between the outer margin boundary under the anchor element and the lower boundary of the containing block. auto
length
%
inherit
2
clip Clips an absolutely positioned element shape
auto
inherit
2
cursor The display cursor moves to the specified type Url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
left Defines the offset between the left margin boundary of the anchor element and the left boundary of the block it contains. auto
length
%
inherit
2
overflow
Sets what happens when the contents of an element overflow its region. auto
hidden
scroll
visible
inherit
2
position Specifies the type of positioning of the element absolute
fixed
relative
static
inherit
2
right Defines the offset between the right margin boundary of the anchor element and the right boundary of the block it contains. auto
length
%
inherit
2
top Defines the offset between the top margin boundary of a positioning element and the upper boundary of its containing block. auto
length
%
inherit
2
z-index Set the stacking order of the elements number
auto
inherit
2

Related articles

CSS Reference Manual: CSS position property