IE7 中绝对定位元素错误
我遇到一个问题,绝对定位的 div 隐藏在浮动 div 后面。我已经在堆栈上做了很多阅读来寻找这个问题的答案,但我尝试过的任何方法都不起作用,所以我将把源代码放在这里。我不知道我错过了什么。
如果您单击“浏览”文本,我会让 jquery 打开一些选项的菜单。这些选项位于绝对定位的 div 中,在 ie7 模式下您将在其下方的 div 内容后面看到它们。我在 IE7 模式 + IE7 标准下使用 IE9 来获得此结果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<title>IE7 Absolutely Positioned Element Issue</title>
<style type="text/css">
* { font-family: Tahoma; font-size: 8pt; padding: 0; margin: 0; border: 0 none; }
div.section { width: 400px; margin: 0 auto; border: 1px solid #444444; margin-top: 5px; }
div.toggleBrowseMenu { cursor: pointer; padding-left: 5px; position: relative; }
div.browseMenu { border: 1px solid #E2E2E2; position: absolute; width: auto; height: auto; left: -3px; top: 19px; padding: 0px; background-color: #FFFFFF; display: none; text-align: left; z-index: 10; }
div.browseMenu ul { list-style-type: none; }
div.browseMenu li { background-color: transparent; padding: 3px 7px; margin: 0px; white-space: nowrap; }
div.browseMenu li:hover { text-decoration: underline; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<div class="section" style="position: realtive;">
<div style="float: left; padding-left: 100px;">
Left Content
</div>
<div class="toggleBrowseMenu" style="float: right; padding-right: 100px;">
Browse
<div class="browseMenu">
<ul>
<a href="http://www.google.com/"><li>Google</li></a>
<a href="http://www.yahoo.com/"><li>Yahoo</li></a>
<a href="http://www.bing.com/"><li>Bing</li></a>
</ul>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="section">
<div style="position: relative;">
<div style="float: left; width: 40%; padding: 5%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at augue at
tellus tristique porta. Nulla rhoncus tincidunt turpis, eu mattis dui
scelerisque in. Vivamus lectus velit, consectetur at pellentesque dignissim,
faucibus id lacus. Aliquam ut eros at erat convallis tincidunt id vel velit.
Pellentesque commodo, nulla sed malesuada convallis, ipsum nulla viverra lorem,
et mattis sapien nibh nec magna. Donec a nibh ligula. Suspendisse at convallis
libero. Phasellus cursus nibh at mi aliquet venenatis. Donec non tortor vitae
sapien facilisis imperdiet. Proin molestie tempor dapibus. Suspendisse potenti.
Nulla facilisi. Suspendisse risus est, faucibus sit amet laoreet in, cursus ut
augue. Cras mollis venenatis est, nec vehicula massa pellentesque et.
</div>
<div style="float: left; Peach; width: 40%; padding: 5%;">
Fusce adipiscing odio quis massa placerat euismod. In eu eros orci. Aenean
mollis luctus velit ac sollicitudin. Cras elit erat, semper quis fringilla ac,
placerat sed justo. Duis sed tellus risus, fermentum pellentesque nunc.
Phasellus mollis tempus eros, posuere dictum augue gravida at. Praesent
sollicitudin justo ac purus iaculis auctor. Suspendisse potenti. Praesent
vehicula fermentum sem in ullamcorper. Donec pharetra ante vitae urna pharetra
dignissim. Suspendisse tincidunt felis elementum lorem imperdiet ullamcorper.
In malesuada, arcu a porta tincidunt, nisl elit pulvinar lacus, in dictum velit
odio eget risus. Integer cursus dapibus tortor ut congue. Nunc mattis mollis
justo. Aliquam quis tellus tellus, eu sagittis tellus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<div style="clear: both;"></div>
</div>
</div>
<script type="text/javascript">
// Toggle the browse menu.
$('.toggleBrowseMenu').click(function ()
{
$(this).find('.browseMenu').toggle();
});
// Hide the browse menu when the mouse leaves the tag.
$('.browseMenu').mouseleave(function ()
{
$(this).hide();
});
</script>
</body>
</html>
I'm having an issue where an absolutely positioned div is hiding behind a floating div. I've done a lot of reading on stack for the answer to this and nothing I've tried works, so I'm going to drop the source code here. I don't know what I'm missing.
If you click the "browse" text, I have jquery open a menu for some options. The options are in the absolutely positioned div and you'll see them behind the div content below it in ie7 mode. I'm using IE9 in IE7 mode + IE7 standards to get this result.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<title>IE7 Absolutely Positioned Element Issue</title>
<style type="text/css">
* { font-family: Tahoma; font-size: 8pt; padding: 0; margin: 0; border: 0 none; }
div.section { width: 400px; margin: 0 auto; border: 1px solid #444444; margin-top: 5px; }
div.toggleBrowseMenu { cursor: pointer; padding-left: 5px; position: relative; }
div.browseMenu { border: 1px solid #E2E2E2; position: absolute; width: auto; height: auto; left: -3px; top: 19px; padding: 0px; background-color: #FFFFFF; display: none; text-align: left; z-index: 10; }
div.browseMenu ul { list-style-type: none; }
div.browseMenu li { background-color: transparent; padding: 3px 7px; margin: 0px; white-space: nowrap; }
div.browseMenu li:hover { text-decoration: underline; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<div class="section" style="position: realtive;">
<div style="float: left; padding-left: 100px;">
Left Content
</div>
<div class="toggleBrowseMenu" style="float: right; padding-right: 100px;">
Browse
<div class="browseMenu">
<ul>
<a href="http://www.google.com/"><li>Google</li></a>
<a href="http://www.yahoo.com/"><li>Yahoo</li></a>
<a href="http://www.bing.com/"><li>Bing</li></a>
</ul>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="section">
<div style="position: relative;">
<div style="float: left; width: 40%; padding: 5%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at augue at
tellus tristique porta. Nulla rhoncus tincidunt turpis, eu mattis dui
scelerisque in. Vivamus lectus velit, consectetur at pellentesque dignissim,
faucibus id lacus. Aliquam ut eros at erat convallis tincidunt id vel velit.
Pellentesque commodo, nulla sed malesuada convallis, ipsum nulla viverra lorem,
et mattis sapien nibh nec magna. Donec a nibh ligula. Suspendisse at convallis
libero. Phasellus cursus nibh at mi aliquet venenatis. Donec non tortor vitae
sapien facilisis imperdiet. Proin molestie tempor dapibus. Suspendisse potenti.
Nulla facilisi. Suspendisse risus est, faucibus sit amet laoreet in, cursus ut
augue. Cras mollis venenatis est, nec vehicula massa pellentesque et.
</div>
<div style="float: left; Peach; width: 40%; padding: 5%;">
Fusce adipiscing odio quis massa placerat euismod. In eu eros orci. Aenean
mollis luctus velit ac sollicitudin. Cras elit erat, semper quis fringilla ac,
placerat sed justo. Duis sed tellus risus, fermentum pellentesque nunc.
Phasellus mollis tempus eros, posuere dictum augue gravida at. Praesent
sollicitudin justo ac purus iaculis auctor. Suspendisse potenti. Praesent
vehicula fermentum sem in ullamcorper. Donec pharetra ante vitae urna pharetra
dignissim. Suspendisse tincidunt felis elementum lorem imperdiet ullamcorper.
In malesuada, arcu a porta tincidunt, nisl elit pulvinar lacus, in dictum velit
odio eget risus. Integer cursus dapibus tortor ut congue. Nunc mattis mollis
justo. Aliquam quis tellus tellus, eu sagittis tellus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<div style="clear: both;"></div>
</div>
</div>
<script type="text/javascript">
// Toggle the browse menu.
$('.toggleBrowseMenu').click(function ()
{
$(this).find('.browseMenu').toggle();
});
// Hide the browse menu when the mouse leaves the tag.
$('.browseMenu').mouseleave(function ()
{
$(this).hide();
});
</script>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
好吧!这是我们得到的。
现在,不要引用我的这个解决方案,因为我只使用 IE7 测试器,而不是实际的 IE7,但它通常适合我。目前,我将右侧部分的背景颜色更改为红色。你可以解决这个问题。
问题是,你有一个额外的 div 包装了包含内容的节类,并使用“position:relative”进行样式设置。该 div 未命名,因此无法通过样式表引用,因此我将其删除。另外,在第一部分 div 类中,相对于我如何完全删除它,您拼写错误,因为您不需要它。我最初将每个项目的 z-index 设置为 1,并将 .browsemenu 类上的 z-index 提高到 10。
另外,“Fusce adipi....”开始的段落,在样式引用中随机包含单词 peach 的 div 换行。
我对所有编辑都发表了评论。
祝你好运,我希望这会有所帮助。
Alright! Here is what we got.
Now, don't quote me on this solution because I am only using an IE7 tester, not actual IE7, but it usually works out for me. Currently, I changed your right section background-color to red. You can fix that.
What was wrong was, you had an extra div wrapping your section class containing the content with a "position:relative" for styling. The div was unnamed, and therefore could not be referenced with a stylesheet, so I deleted it. Also, in the first section div class you misspelled relative how I completely removed it, because you don't need it. I set every items z-index to 1 initially and upped your z-index on the .browsemenu class to 10.
Also, the paragraph where "Fusce adipi...." starts, the div wrapping that randomly contained the word peach in the style referencing.
I made comments for all my edits.
Good luck and I hope this helped.
我不知道为什么你认为菜单应该出现在内容之上;
z-index
仅适用于相对于兄弟姐妹。您可以在最顶部添加z-index
,如果您还正确拼写relative
,您应该会发现菜单按照您想要的方式显示。I don't know why you think the menu should appear over the content;
z-index
only applies relative to siblings. You could addz-index
on the topmost section, and if you then also spellrelative
correctly you should find that the menu appears how you want it to.