IE7 中的绝对定位元素错误
[英]Absolutely Positioned Element Error In IE7
问题描述
I'm having an issue where an absolutely positioned div is hiding behind a floating div.
我遇到了一个绝对定位的 div 隐藏在浮动 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.如果您单击“浏览”文本，我会让 jquery 打开一些选项的菜单。 The options are in the absolutely positioned div and you'll see them behind the div content below it in ie7 mode.选项位于绝对定位的 div 中，在 ie7 模式下，您将在其下方的 div 内容后面看到它们。 I'm using IE9 in IE7 mode + IE7 standards to get this result.我在 IE7 模式下使用 IE9 + IE7 标准来获得这个结果。
<!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>
2 个解决方案
解决方案1
1 2011-07-26 22:59:05
I don't know why you think the menu should appear over the content;我不知道你为什么认为菜单应该出现在内容之上； z-index only applies relative to siblings. z-index仅适用于兄弟姐妹。 You could add z-index on the topmost section, and if you then also spell relative correctly you should find that the menu appears how you want it to.您可以在最上面的部分添加z-index ，然后如果您还正确拼写了relative ，您应该会发现菜单以您希望的方式显示。
解决方案2
1 已采纳 2011-07-26 23:16:00
Alright!好吧！ Here is what we got.这是我们得到的。
<!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; z-index:1;}
/* z-index to 1 for everything*/
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; }
/*set z-index to 10 here! */
div.browseMenu ul { list-style-type: none; }
div.browseMenu li { background-color: green; 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"> <!-- you didn't this to be relatively positioned -->
<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"><!-- removed wrapping div with relative positioning here-->
<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="background-color:red; float: left; 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>
<script type="text/javascript">
// Toggle the browse menu.
$('.toggleBrowseMenu').click(function ()
{
$('.browseMenu').toggle();
});
// Hide the browse menu when the mouse leaves the tag.
$('.browseMenu').mouseleave(function ()
{
$(this).hide();
});
</script>
</body>
</html>
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.现在，不要引用我这个解决方案，因为我只使用 IE7 测试器，而不是实际的 IE7，但它通常对我有用。 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.出了什么问题，您有一个额外的 div 包装您的部分类，其中包含带有“位置：相对”样式的内容。 The div was unnamed, and therefore could not be referenced with a stylesheet, so I deleted it.该 div 未命名，因此无法用样式表引用，因此我将其删除。 Also, in the first section div class you misspelled relative how I completely removed it, because you don't need it.此外，在第一节 div 类中，您拼错了我如何完全删除它，因为您不需要它。 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.我最初将每个项目的 z-index 设置为 1，并将 .browsemenu 类上的 z-index 提高到 10。此外，“Fusce adipi ....”开始的段落，div 包装中随机包含桃子这个词风格参考。
I made comments for all my edits.我对我所有的编辑发表了评论。 Good luck and I hope this helped.祝你好运，我希望这有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.