button { position: absolute; display: inline-block; background-color: red; height: 50px; line-height: 50px; padding-left: 30px; } span { background-color: blue; position: absolute; left: 0; width: 30px; text-align: center; }
An element with position: `relative`; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
An element with position: `absolute`; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
[![Check the output here][1]][1]

[1]: https://i.stack.imgur.com/RifCP.png

If you need to position an element relative to its containing element first you need to add `position: relative` **to the container element**. The child element you want to position relatively to the parent **has to have** `position: absolute`. The way that absolute positioning works is that **it is done relative to the first relatively (or absolutely) positioned parent element**. In case there is **no relatively** positioned parent, the element will be positioned relative to the **root element** (directly to the HTML element).
So if you want to position your child element to the top left of the parent container, you should do this:
.parent { position: relative; } .child { position: absolute; top: 0; left: 0; }
You will benefit greatly from reading [this article][1]. Hope this helps!

[1]: https://kolosek.com/css-position-relative-vs-position-absolute/