div 的文本覆盖在另一个文本之上，IE8 则不会覆盖文本
我有两个div，左对齐右对齐。我需要左边的方块越过右边的方块。如您所知，IE 仍然是问题...两个块中的文本是混合的，没有经过处理，文本似乎是独立的。
jsfiddle http://jsfiddle.net/P3Qgb/
这里的代码：
<html>
<style>
#root {
position:fixed;
}
#content {
height: 200px;
width: 400px;
border: 1px solid red;
position:fixed;
}
#bloc-left {
position:absolute;
float: left;
height: 190px;
border: 1px solid black;
width: 60%;
overflow:auto;
background-image: linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -o-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -moz-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -webkit-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -ms-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbfbfb), color-stop(1, #e2e2e2));
}
#bloc-right {
float: right;
width: 45%;
height 190px;
border: 1px solid black;
}
</style>
<body>
<div id=""root">
<div id="content">
<div id="bloc-left">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="bloc-right">
Lorem Ipsum is simply dummy text of the printing and typesetting
</div>
</div>
</div>
</body>
</html>
目标是添加一个链接使用一些 js 将左侧块扩展到右侧块。
感谢您的帮助 ！
编辑：添加根div
I have two div, the left align with the right one. I need the left block to go over the right. As you know IE is still the problem ... The text in the two blocks is mixed, no over is processed, the text seems indepdendent.
The jsfiddle http://jsfiddle.net/P3Qgb/
Here the code :
<html>
<style>
#root {
position:fixed;
}
#content {
height: 200px;
width: 400px;
border: 1px solid red;
position:fixed;
}
#bloc-left {
position:absolute;
float: left;
height: 190px;
border: 1px solid black;
width: 60%;
overflow:auto;
background-image: linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -o-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -moz-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -webkit-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -ms-linear-gradient(top, #fbfbfb 0%, #e2e2e2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbfbfb), color-stop(1, #e2e2e2));
}
#bloc-right {
float: right;
width: 45%;
height 190px;
border: 1px solid black;
}
</style>
<body>
<div id=""root">
<div id="content">
<div id="bloc-left">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="bloc-right">
Lorem Ipsum is simply dummy text of the printing and typesetting
</div>
</div>
</div>
</body>
</html>
The goal is to add a link which expand the left block over the right, with some js.
Thanks for your help !
EDIT: add root div
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
添加：
z-index: 1;到#bloc-left更改：
position:fixed;到position:relative;代码>#contentadd:
z-index: 1;to#bloc-leftchange:
position: fixed;toposition: relative;on#content