Relative & Absolute positioning just won´t work

[aria.spark]

Hi!
I was trying to set a paragraph (positioned as absolute) on the top-right corner of another paragraph (positioned as relative). The “absolute” paragraph was a direct child of the “relative” paragraph and I used “top: 0;” and “right: 0;” to place the paragraphs as I wanted. As far I know, the “absolute” paragraph should have moved to the top-right border of the “relative” paragraph, but this just doesn´t happens at all. The “absolute” paragraph keeps relating itself to the html element and not at all to the “relative” p.

I also tried to do exactly the same thing but using div elements to see if something would come out all right, but it didn´t happen as well.

What am I doing wrong?
The link to the CodePen follows: https://codepen.io/ariaspark/pen/kXdVbL

[Paulie_D]

The problem is probably that you can’t have a paragraph (or div) as a child of a paragraph…it’s invalid HTML.

The browser will close the first (parent) paragraph automatically so the absolute one never gets to be a child.

Unfortunately, it’s not really clear what you are trying to do.

Why would you need to overlay a paragraph with another one? Wouldn’t that make both pieces of text unreadable?

[bearhead]

Yeah, I’m also kind of unsure about how you need this to look. Is the blue (absolute) div, supposed to be on top of the orange (relative) div?

If so, the absolutely positioned div needs to be a child of the relatively positioned one. You currently have them as siblings – both are children of the body element.

[aria.spark]

I have posted it again after I changed the code to something more clear. What I been trying to do is to place the Absolute blue div over the marron “Item 3” div. But I am being unsuccessful because I need the blue div over exactly the maroon area of the “Item 3” div. But as we can see, the blue absolute div is not relating itself to its previous div containing an id with relative positioning. Hopefully I was clear enough.

[Beverleyh]

To do what you’re attempting, #box isn’t the element that needs to be relatively positioned with your current markup. #box is a sibling of the blue box – they are currently at the same level in the DOM. You have to relatively position the parent in order to “trap” an absolutely positioned child, so you would change the markup to close the #box div after the .absolute one.

BTW, you can’t have more than one element with the same id (i.e. “box”). If you want to use the CSS more than once, change it to a class.

[bearhead]

I forked your pen:
https://codepen.io/kvana/pen/qaBaJB

[deb]

Put div id absolute inside div id box

[Author]

Posts