我有以下代码:
<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>
第二个 div 没有定位在 32 x 位置，除非我删除了我需要的 display: inline-block 属性。有解决办法吗？
编辑:如果我删除 display: inline-block，它似乎可以工作，但是滚动条将水平显示(因为 div 占用了一些不可见的空间)。
最佳答案
在 position:relative 中，您应该使用 position:absolute 元素的显示方式。
此外，要避免水平滚动条，请使用overflow-y。
关于html - 内联 block 搞乱了相对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2080956/