Question

div覆盖div，不用z-index能实现么？

<div id=“div1” style="width:200px; height:24px; overflow:hidden; zoom:1;">
<div id=“div2” style="float:left; height:24px; overflow:hidden;padding-right:24px;">000000000000000000000000000000000000000000000000000000</div>
<div id=“div3” style="float:right; width:24px; height:25px; float:right;margin-top:-24px;">…</div>
</div>
这个是在火狐浏览器下不能实现内容超出div的范围，多出的部分用省略号代替。我这段代码写完之后效果是省略号和div2所在的内容的末端重叠了，我想用省略号覆盖该怎么实现？

Answer 1

单就你的代码而言是因为你的三个id名称都用了中文模式下的双引号。
另外如果你是想要文本超出用省略号，用overflow:hidden;text-overflow: ellipsis;就行了（限单行文本），像这样<div id="div1" style="width:100px;height:24px;overflow:hidden;text-overflow: ellipsis; ">0000000000000000000000000000000000000000</div>，没必要那么多标签那么麻烦的。

追问

你这个方法在IE等浏览器是没有问题的，但是在firefox不支持这个（text-overflow: ellipsis）。

追答

网上查了一下都说火狐不支持text-overflow: ellipsis，但是我的火狐不知什么原因居然支持，郁闷。
那来说你的代码吧，第一种改法（有点取巧），给div3加个和它所在部位一样的背景色，这样就可以遮住重叠部分的div2的文本。第二种改法是把div2的css改为style="float:left;width:176px;height:24px; overflow:hidden;"，div3的css改为style="float:right; width:24px; height:24px;"，看你喜欢哪种了。

Answer 2

<div id="div1" style="width:200px; height:24px; overflow:hidden; zoom:1; position:relative; z-index:1;">
<div id="div2" style="float:left; height:24px; overflow:hidden;padding-right:24px;">000000000000000000000000000000000000000000000000000000</div>
<div id="div3" style="width:24px; height:25px; position:absolute; top:0px; right:0px; z-index:2; background:#FFF;">…</div>

Answer 3

用position