Scribd
Upload
55 views17 pages

4.0 CSS Position Property

The CSS position property defines how an element is positioned in a document, with values including static, relative, fixed, and absolute. Static is the default positioning, while relative adjusts an element's position from its normal flow without affecting surrounding content. Fixed positioning keeps an element in place during scrolling, and absolute positioning allows for placement anywhere on the page.

Uploaded by

keshavkumarsaini2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
55 views17 pages

4.0 CSS Position Property

The CSS position property defines how an element is positioned in a document, with values including static, relative, fixed, and absolute. Static is the default positioning, while relative adjusts an element's position from its normal flow without affecting surrounding content. Fixed positioning keeps an element in place during scrolling, and absolute positioning allows for placement anywhere on the page.

Uploaded by

keshavkumarsaini2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

CSS position Property

CSS position Property

• The position CSS property sets how an element is


positioned in a document.

• The top , right , bottom , and left properties determine the


final location of positioned elements

• However, these properties will not work unless


the position property is set first. They also work differently
depending on the position value.
CSS position Property
used to specify where an element is
displayed on the page.
position: static;
position: static;

• HTML elements are positioned static by


default.

• Static positioned elements are not affected by


the top, bottom, left, and right properties.

• An element with position: static; is not


positioned in any special way; it is always
positioned according to the normal flow of the
page:
position: relative;
position: relative;

• An element with position: relative; is


positioned relative to its normal position.

• Setting the top, right, bottom, and left


properties of a relatively-positioned element
will cause it to be adjusted away from its
normal position.

• Other content will not be adjusted to fit into


any gap left by the element.
position: fixed;
position: fixed;

An element with position: fixed; always stays


in the same place even if the page is scrolled.

The top, right, bottom, and left properties are


used to position the element.

A fixed element does not leave a gap in the


page where it would normally have been
located.
position: absolute;
Absolute Position

• With absolute positioning, an element can be


placed anywhere on a page.

• The heading below is placed 100px from the


left of the page and 150px from the top of the
page

You might also like