bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch
Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Position Offsets

Positioning with top, right, bottom, and left The top, right, bottom, and left properties are used to position elements.

These properties only work on positioned elements

(elements with position set to relative, absolute, fixed, or sticky ).

Positioning Text On an Image

How to position text on an image:

Example

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Try it Yourself:

Top Left » Top Right » Bottom Left » Bottom Right » Centered »

All CSS Positioning Properties

Property

Description bottom

Sets the bottom margin edge for a positioned box clip

Clips an absolutely positioned element left

Sets the left margin edge for a positioned box position Specifies the type of positioning for an element right Sets the right margin edge for a positioned box top Sets the top margin edge for a positioned box

Previous

CSS Sticky Positioning

Next

CSS The z-index Property