html - Relative parent ignored with absolutely positioned children -


i know there lot of questions positioning out there, including absolute positioning inside relative parent.

i've read many of these questions , found informative link on css-tricks (absolute positioning inside relative parent). after troubleshooting fails, turn ;)

this jsfiddle contains think right, isn't. why child elements of parent div positioned relative body , not 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 answer typo. posotion should position in parent div. future references: positioning methods in fact work :)

thanks gaurang!

take note: have written posotion: relative in style attribute of div#editorwrapper. should position: relative instead.

fixed fiddle


Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -