inline-block messes up with relative positioning
Question
I have the following code:
<HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">
<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">
<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>
<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>
</div>
</BODY>
</HTML>
The second div isn't positioned on the 32 x position unless I remove the display: inline-block property, which I need. Is there a way around this?
Edit: it seems to work if I remove display: inline-block, but then the scrollbars will appear horizontally (as the div takes some invisible space).
2 answers
solution1
1 ACCPTED 2010-01-17 12:40:53
You should use the way position:absolute elements are displayed when inside position:relative .
In addition, to avoid the horizontal scroll bar, use overflow-y .
Working example: http://jsbin.com/uveni3
solution2
0 2011-09-12 01:20:32
When using "inline-block" properties, you should always start your HTML opening tag in a DTD format. placing one there should resolve this.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.