2

I am writing a web application and I'm having trouble with one part, where I have a rollover thing, but it's currently rolling under. EDIT: pastehtml was rejected, here is jfiddle: http://jsfiddle.net/XmKwt/1/

The right div goes under the left div, even though the z-index says it should not.

I have found that if the "position:relative;" css is removed (see source) then it works just fine, but I don't understand why and I need the "position:relative;" css there for other reasons, not demonstrated in this simplified example.

<!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">
<head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
    /* Remove this line and it works */

    #featureleft {position:relative;}

    /* End */

    #layoutdiv { text-align: left; width: 940px; }
    #featureleft { width: 580px; float: left;z-index:10; background:red; }
    #featureright { float: right; z-index:100;}
    #copypaste { background-color: #bbb; margin-bottom: 40px; padding-right: 10px; padding-left: 10px; width: 300px; height:200px; margin-left: 20px; border: solid 5px #000; }
    </style>

    <script language='javascript'>
    $(document).ready(function() {
        $('#copypaste').mouseenter(function(){
            p=$(this).position();
            // increase/move by p.left
            move=Math.round(p.left)-0;
            width=parseInt($(this).css('width'))+parseInt(move);
            margin=0-(parseInt(move)-20);
            inputs=parseInt(move)+280;
            $(this).css('width',width+'px').css('margin-left',margin+'px').css('height',$(this).height);
        });

        $('#copypaste').mouseleave(function(){
            $(this).css('width','300px');
            $(this).css('margin-left','20px');
        });
    });
</script>
</head>

<body>
    <div id="layoutdiv" class='container fakewindowcontain'>
        <div id='featurewrapper'>
            <div id='featureleft'>
                <p>Lorem ipsum dolor sit amet, ut eget et enim, nec auctor habitasse eu mattis eget odio, lacinia vivamus libero dictum, tempor nunc nec nam fringilla mauris, et class dolor curabitur ipsum. Commodo ultricies id</p>
            </div>

            <div id='featureright'>
                <div id='copypaste'>
                <p>Lorem ipsum dolor sit amet, ut eget et enim, nec auctor habitasse eu mattis eget odio, lacinia vivamus libero dictum, tempor nunc nec nam fringilla mauris, et class dolor curabitur ipsum. Commodo ultricies id</p>
                </div>      
            </div> 
        </div>
    </div>
</body>
</html>
Ben Holness
  • 2,457
  • 3
  • 28
  • 49
  • 1
    High Risk Website Blocked Location: pastehtml.com/view/bwqlq812t.html Access has been blocked as the threat Mal/HTMLGen-A has been found on this website. – Diodeus - James MacFarlane May 02 '12 at 17:10
  • 1
    Your pastehtml link doesn't work. For what it's worth, the CSS z-index property is ignored on elements that don't have a position other than static (the default). – Adam Jenkins May 02 '12 at 17:10
  • 1
    Your link is also not working for me. You should try http://jsfiddle.net. – Drew Gaynor May 02 '12 at 17:11
  • @Diodeus same here, I edited out the link. BenHolness please post the code in the question. The link you provided is showing as malicious. – James Montagne May 02 '12 at 17:12
  • Link works for me but basically yes, "the CSS z-index property is ignored on elements that don't have a position other than static (the default)." is somewhat an answer.. – 19greg96 May 02 '12 at 17:12

1 Answers1

3

The #featureright div does not have a position declared (and thus it is the same as position: static). As I said in my comment

"the CSS z-index property is ignored on elements that don't have a position other than static (the default)"

Therefore, to get it to obey the z-index property, you need to add position: relative to #featureright

Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
  • EDIT: But if you add position: relative, you're mouseenter function doesn't work unless you change p = $(this).position() to p = $(this).offset()...but that's a whole lot of messy code anyway... – Adam Jenkins May 02 '12 at 17:34
  • adding position:relative to #featureright stops the rollover from working though. I guess I need to find a different way to make that happen. – Ben Holness May 02 '12 at 17:35
  • 1
    Just add `position: relative` and `z-index:100` to `#copypaste` instead of `#featureright` – My Head Hurts May 02 '12 at 17:41