How to position element absolute but inside its container?

This trick will help you place element inside its cointainer using absolute positioning. Very often you want to be very precise when placing elements. It is very hard/impossible when you anchor to entire window because browser resizing is messing everything up. To avoid this, simply set relative positioning to the wrapper element. Check demo.

Image below shows what you can accomplish using this technique:


Published by

Konrad Fedorczyk

I'm interested in programming and gamedev. I especially luv HTML5 and everything connected to web technologies.

4 thoughts on “How to position element absolute but inside its container?”

  1. It’s not a trick but a basic css behavior
    You also don’t need to specify div before the ID selector in css file as there can be only one ID in the document and ID is the strongest selector so it cannot be overridden without using ID again or !important in the css file.
    You also should not specify units if it’s the value equals 0, it’s redundant.
    You should also you lowercase names

    1. Hi nightmare,
      You have absolute right about CSS optimizations. Of course I use them on daily basis. This code was written in 5 mintues for educational purposes only but I will update it. I’m not sure about “It’s not a trick but a basic css behavior” because I’ve seen it on a css tricks website for a first time. Is there any W3C documentation about that?

Leave a Reply

Your email address will not be published.