Guide For Better Understanding CSS Position Properties and Values | Droidnur123

To decide the position of an object to another object, or an object to the browser, it is necessary to understand CSS Position. Therefore, I will try to explain in the easiest way what CSS Position is and how this CSS Position property works.

Have you ever seen elements that seem to overlap, float, or seem out of line? It's all made using CSS Position Like Static, Relative, Absolute, and Fixed. In addition to the position declaration, there are also several properties that are usually written together with the position declaration such as top, right, bottom, left, and z-index.

Top, right, bottom, and left are position arranges. When we add the coordinate value to the actual position, the element will shift according to the coordinate value. 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 element's position from its place of origin.

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

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

code1

.box is the Selector (the part or element that we want to set the style)

position is the Property (the component we need)

relative is the Value / Value of the Property

Declaration is the part that is inside {} namely properties and values.

Value or the value of the CSS position is:

• static ditulis position:static
• relative is written position:relative
• absolute written position: absolute
• fixed ditulis position:fixed
• inherit ditulis position:inherit

position:static

This position is the default position of an element (static). The layout is like a regular div. At this position 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 lines down). In this condition, if the green wants to line up with red then both must be added float:left

position:relative

This position is often used, in this position we can take advantage of the top and left properties. The object will change position with respect to the main element, and also relative to itself. In contrast to position:static , by applying position:relative we can change the position of the element as we want.

position:absolute

By implementing position:absolute, then the object will follow the parent (parent element) provided that the parent element must use position:relative.

The red one's position won't go anywhere because the background (the black one) uses position:relative, basically position:relative is a fence from the child who is given position:absolute so that it doesn't run away.

Position Absolute to the Screen

If the black without position: relative then 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 that position: fixed will always be in its position even if the browser is scrolled. For example, I joined position:absolute to the screen (above example).

position:inherit

This position will follow the position on the parent element. If the parent element has position:absolute then the element inside is given a position property with the value inherit, then the result will be position:absolute (follows the parent element).

That's all from Droidnur123 about Better Understanding CSS Position Properties and Values, hopefully, it's useful and greetings.

Go to Link