Better Understanding CSS Position Property and Values

To determine the position of an object with respect to other objects, or objects with respect to the browser, it is necessary to understand CSS Position . Therefore I will try to explain What is CSS Position and how does the property of CSS Position work.



Have you ever seen elements that appear to overlap, float, or look out of bounds? That's all made using CSS Position Like: Static, Relative, Absolute and Fixed. In addition to position declarations, there are also some properties that are usually written together with position declarations such as top, right, bottom, left and z-index.

Top, right, bottom and left are position coordinates. When we add the coordinate value to the actual position, the element will shift according to the value of the coordinates. Top, right, bottom and left are different from margin-top, margin-right, margin-bottom and margin-left. The margin value is focused on the distance of the element to other elements, while the coordinate value is more focused on the offset of the position of the element from its origin.

Z-index is a stack order. When we declare position: absolute, then what is likely to happen is that elements will stack next to the element or below the element. If what happens is the second, then to raise it, we must declare the z-index with a value greater than 1.

Some other terms that must be known are such as selector, property, value and declaration. To understand this, consider this CSS:

.box{position:relative}

.box is the Selector (the part or element that we want to set the style)
position is Property (the component we need)
relative is the Value of the
Declaration Property is the part that is in {} that is property and value.

The value of CSS position is:

1. static written position: static
2. relative written position: relative
3. absolute written position: absolute
4. fixed written position: fixed
5. inherit written position: inherit

position: static

This position is the default position of an element (static). The layout is like a normal div. In this position, the top right bottom and left will have no effect, for example:

in DIV2 and DIV3 (click on CSS and HTML in the demo to understand the code better), and this has no effect at all, because it forms a vertical pattern (new line down). In this condition if the green wants to line up with red, then both float: left must be added

position: relative

This position is often used, in this position we can use the top and left properties. The object will change its position towards the main element, and is also relative to itself. In contrast to position: static, by applying position: relative we can change the position of the element as we wish.

position: absolute

By applying position: absolute, the object will follow the parent (parent element) with the parent element must use position: relative.

The position of the red one will not run anywhere because the background (the black one) uses position: relative to the point position: relative is the fence of the child given position: absolute so that it does not escape.

Absolute Position on the Screen

If the black without position: relative, the red will adjust to the screen. For more details,

position: fixed

This position is almost the same as position: absolute, but the difference is position: fixed will always be in position even though the browser is scrolled. For example, I join position: absolute on the screen (example above).

position: inherit

This position will follow the position on the iduk element. If the parent element has position: absolute, then the element inside if given a position property with inherit value, the result becomes position: absolute (following the parent element).

That's all from Sayem Tutorial about Understanding CSS Position Property and its Value , hopefully it's useful and respectful.