Absolutely Positioned Element Error In IE7_问答_开发者

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>

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. 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.

I don't know why you think the menu should appear over the content; z-index only applies relative to siblings. 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.