Werte Gemeinde,
gegeben sei folgendes Beispiel: http://skop.net/self/opera-9-position-absolute-relative-absolute.htm
Warum positioniert Opera 9 das ul-Element mit der ID topics nicht genau unterhalb des zugehören (Eltern-)Listenelements? Beide Bereiche sind mit gelber Hintergrundfarbe markiert.
HTML:
<ul id="breadcrumb"> <!-- absolute-->
<li><a href="#">bar bar</a></li>
<li id="page"><a href="#">baz baz</a> <!-- relative -->
<ul id="topics"> <!-- absolute -->
<li class="header">bla</li>
<li><a href="#">#1 ...</a></li>
</ul>
</li>
<li>bla bla</li>
</ul>
CSS:
body { max-width:65em; margin:auto; height:15em; border:1px solid #888; }
#breadcrumb { position:absolute; top:0; }
#breadcrumb li { display:inline; padding:0 .5em; }
#topics { position:absolute; top:1.2em; left:0; padding:.2em; border:1px solid #aaa; }
#topics li { display:block; }
#topics .header { background-color:yellow; }
#topics a { display:block; font-weight:normal; padding:0 .2em; }
#page { position:relative; background-color:yellow; }
#page:hover #topics { display:block; }
#breadcrumb ist absolut positioniert; #page relativ, um dessen Kind #topics für position:absolute die Ausgangskoordinaten vorzugeben.
Opera kümmert das allerdings wenig. Safari, Firefox, die CSS-Spezifikation und ich sind uns einig, dass es anders richtig wäre. Kennt jemand einen Workaround?
Roland