CSS Position

By Tony 8.29.2024

Although you can use padding and margin, or even flexbox to place elements in a certain place, but the layout might break when you zoom in or out. With CSS positioning, this problem is easily fixed, and it comes with a bunch of other useful techniques for layout in CSS.

The first property we have is the position property. It tells the browser how to position the element. In this case, it's absolute, meaning that the element is "pinned" to an absolute position on the screen, and it's not affected by any other elements on the page, even if that means overlapping. The top property tells the browser how far away the top of the element is from the top edge of the screen, and the left property defines the distance between the left of the element to the left edge of the screen. By using the top and left properties, we gave the browser a coordinate to pin, or position the element. You can also use right and bottom properties, which also work the same way.

There are also different position values, such as position: sticky; and position: fixed. If you set the value to sticky, the element will "stick" to a certain position when you scroll, meaning that the element stays on the screen, even if you scroll. position: fixed; is kind of like position: sticky; except that the element stays at the same spot even if you don't scroll.

Think of the browser rendering a webpage as stacking pieces. Every time an element is loaded, it is stacked on top of the previous element, making multiple layers on a single page. The z-index property overrides the layers and brings a specific element to a specific layer. The value determines which layer the element goes to. The higher the value, the higher the element is stacked on the page. You can set it to the top so nothing covers or overlaps it on the page. You can also bring an element to the bottom of the layers by setting the z-index property to -1.

Bonus: float

Imagine if you have a long paragraph, and you want to put a picture in it so that the picture is on the right of the paragraph and the text in the paragraph wraps around the picture. How are you going to do that with CSS? That's what float is designed to do. Simple give the element you want to float in a paragraph (like the example above) float: left; or float: right; to make the element float to the left or the right with other elements on the page wrapping around it. Keep in mind that this doesn't only apply to pictures in paragraphs, but you can also use float with any element to achieve this effect, have fun!