The element is positioned based off of the normal flow of the page, as it will move along with it. No other properties, such as top or bottom, have an effect. This is the default orientation.
The CSS property positioning decides how and where an element will be positioned on a page. Locations such as, the top, right, bottom, and left possitional properties determine the precise coordinate location of a positioned element. You can use these locations to determine just how much of an impact you want to make on the position of your element. For example: top: 2px would move the element up 2 px from its normal position.
When reading the information below on each type of position, engage in the interactive element below by clicking each title button. Each button will showcase the different abilities of the positions. Some of these positions are oriented more towards text or images, however little boxes will be used in this demonstration just as a loose example. Some may totally affect the layout of the squares, while some may seem to have no effect at all. The buttons affect each square in order from left to right. You can refresh the page after each one to reset the squares, or you can try them all at once and see what happens!
The element is positioned based off of the normal flow of the page, as it will move along with it. No other properties, such as top or bottom, have an effect. This is the default orientation.
Just like static, the element is positioned based off of the normal flow of the page. However, other properties effect the element, and it is then moved relative to itself based on the values of top/bottom/left/right.
The element is taken out of the normal page flow, and it is not given its own space in the page layout. It relies heavily on other positioned elements around it and secures itself onto them. If no other positioned elements are coded into the HTML, then the absolute element follows the variables of the /body> for the page. Elements attached to this command can also rely on the positional properties to give it its place on the page.
Just like absolute elements, a fixed element is removed from the normal page flow. It is positioned relative to the page, and scrolling up and down on the page has no affect on the elements overall position.
The element is positioned according to the normal flow of the page, until the point of scrolling reaches a specific viewport. When given this property, the element will stick to a designated portion of the page when scrolled past, remaining there until the user scrolls back to it's original position. The element then takes on a fixed position on the page. This position, however, does come with some issues with its display on certain browsers. Safari requires a -webkit- prefix when implementing in in its browsers, and Internet Explorer does not support it at all.
When implementing this CSS into your code, you want to start out by choosing what type of position you want your element to take on, you can choose from the list we discussed above. In your CSS document, you would apply this code such as in the examples below. In the images you can see that the next step is to apply top/bottom/left/or right positions in order to complete the position of the element for position:relative, fixed, absolute, and sticky.
To try this, lets mess around with these properities and change the exact position on the page of each square.
First click on the name of the position below that you want to manipulate, and then input a top and left position property number to change where the box will be located on the page.