CSS properties - position

revision:

position property

- specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky)..

CSS syntax : position: static | absolute | fixed | relative | sticky | initial | inherit;

Property values:

static : default value. Elements render in order, as they appear in the document flow.

absolute : the element is positioned relative to its first positioned (not static) ancestor element

fixed : the element is positioned relative to the browser window

relative : the element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position

sticky : the element is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.position="absolute"

example: position property

This is a heading with an absolute position

With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 10vw from the left of the page and 45vw from the top of the page.

This heading is moved left according to its normal position

This heading is moved right according to its normal position

code: 
                    <div>
                        <h4 class="first">This is a heading with an absolute position</h4>
                        <p>With absolute positioning, an element can be placed anywhere on a page. The heading below 
                        is placed 10vw from the left of the page and 45vw from the top of the page.</p>
                        <h4 class="pos_left">This heading is moved left according to its normal position</h4>
                        <h4 class="pos_right">This heading is moved right according to its normal position</h4>
                    </div>
                    <style>
                        h4.first {position: absolute; left: 10vw; top: 49vw;}
                        h4.pos_left {position: relative; left: -3vw}
                        h4.pos_right {position: relative; left: 5vw;}
                    </style>