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:

position-absolute



Posted

in

Tags:


Comments

0 responses to “How to position element absolute but inside its container?”

  1. nightmare Avatar
    nightmare

    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. Konrad Fedorczyk Avatar
      Konrad Fedorczyk

      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?

  2. nightmare Avatar
    nightmare

    http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
    https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning
    http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

    tl;rd: “positioin: absolute – The element is positioned relative to its first positioned (not static) ancestor element”

    cheers

    1. Konrad Fedorczyk Avatar
      Konrad Fedorczyk

      Thanks!