CODEWITHSUNDEEP
htmlcsscss-position
DerpyNerd
DerpyNerd

Reputation: 4803

Relative parent ignored with absolutely positioned children

I know that there are a lot of questions about positioning out there, including about absolute positioning inside a relative parent.

I've read many of these questions and found a informative link on css-tricks (Absolute positioning inside relative parent). After all troubleshooting fails, I turn to you ;)

This JSFiddle contains I think is right, but clearly isn't. Why are the child elements of the parent div positioned relative to the body and not the div?

code:

<div id="editorWrapper" style="posotion: relative; width:751px; height:250px; margin-left: 20px; margin-top: 20px; border: 1px solid blue;">
    <a class="lnk" href="http://www.google.be" style="display: inline-block; position:absolute; left: 1%; top: 1%; padding: 5% 5%;"></a>
    <a class="lnk" href="http://www.google.be" style="display: inline-block; position:absolute; left: 80%; top: 80%; padding: 10% 10%;"></a>
    <div style="position: absolute; padding: 10px; left: 60%; top: 60%; background-color: red;" />
</div>

EDIT The answer is just a typo. posotion should be position in the parent div. For future references: this positioning methods does in fact work :)

Thanks Gaurang!

Upvotes: 0

Views: 145

Answers (1)

Gaurang Tandon
Gaurang Tandon

Reputation: 6753

Take note: You have written posotion: relative in the style attribute of div#editorWrapper. It should be position: relative instead.

Fixed Fiddle

Upvotes: 2

Related Questions