Genies Hour (6)

Position

Know

CSS Position Properties

The position property specifies the type of positioning method used for an element.

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

                                                          What I have learned?

• An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.
• An element with position: relative; is positioned relative to its normal position.
• An element with position: fixed; is positioned relative to the viewport, which means it 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.
• An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
• An element with position: sticky; is positioned based on the user's scroll position.

                What problem do I foresee happening?

Always forget to write the position:relative first in the parent element.So it would always styling relative to my body element.

How can I solve than now?

check every time to see if the website show anything

What is happening that you did not expect?
Getting confusing when I am using the position to allocated my img

What is the best thing that happened,why?
When I saw my codes becomes an actual website and appeared on the chrome where it is showing it's effects.