Grokking CSS for Web Development
Vote

0% completed

​

Position Property (static, relative, absolute, fixed, sticky)

A "Sale" badge in the corner of a product card, 8px from the top edge and 8px from the right edge, is hard to build with margins and padding alone. The badge would need to sit on top of the card's content without pushing the title down. The position property solves this kind of problem by letting you take a box out of its normal place and put it at exact coordinates.

So far in this course, the browser has placed every box itself. It stacks block boxes from top to bottom and places inline boxes from left to right inside lines of text. This default arrangement is called normal flow. The

.....

.....

.....

Like the course? Get enrolled and start learning!

Reading Progress

0%


Vote for new content