Using absolutely positioned element inside inline-block element in Opera
I keep getting weird results under Opera 10.60 trying to absolutely positio开发者_JAVA技巧n block element inside inline-block element.
Sample code:
<html><head><style type="text/css">
div.container {
position: relative;
display: inline-block;
padding: 5px 100px;
border: 1px solid red;
}
div.block {
display: block;
position: absolute;
top: 0px;
right: 0px;
border: 2px solid brown;
}
</style></head><body>
<div class="container">
<div class="block">(>O.o)></div>
Quick brown block <a href="#">jumps</a> over relative div.
</div>
</body></html>
Opera positions .block relative to the last inline element ( in this example) inside the same parent (.container), instead of positioning it relative to the parent.
Am I missing something, or is it just a bug, and I should find the other way around?
wrap your content in a div or something else, then it works. http://jsbin.com/isuke3/edit
Change
position: relative;
to
position: absolute;
and it will align itself correctly in the browsers. :)
加载中,请稍侯......
精彩评论