Div tag's layering question_问答_开发者_运维开发者技术经验分享

Suppose i am having two Div layer

<div id="div1"> One </div>
<div id="div2"> Two </div>

I want them both to be overlapped

and when i click the Button i want that the 开发者_如何转开发Div1 layer to go in the background and the top layer should become Div2.

How can i achieve it through JavaScript ?

If the z-index is being set with CSS then you need to get the computed style of the element, so getting element.style.zIndex directly won't work. Since this is implemented differently in IE than in other browsers, let's make a function to get the computed style:

var getCompStyle = function( id ) {
    var curStyle;
    if (window.getComputedStyle) {
        curStyle = window.getComputedStyle(document.getElementById( id ), null);
    } else {
        curStyle = document.getElementById( id ).currentStyle;
    }
    return curStyle;
};

Once we have this function, we can then apply the z-index accordingly attached to a button click handler:

document.getElementById('switch').onclick = function(e) {
    var div1style = getCompStyle( 'div1' );
    var div2style = getCompStyle( 'div2' );
    var switcher = div1style.zIndex;
    document.getElementById('div1').style.zIndex = div2style.zIndex;
    document.getElementById('div2').style.zIndex = switcher;
};

I've created a fiddle example here (link) to demonstrate.

Vertical positioning is controlled in CSS using the "z-index" parameter. You can set this with javascript by accessing the element's "style" parameter.

Here's a full example, with comments indicating tricky spots to watch out for:

<!DOCTYPE html>
<html>
    <head>
        <style type='text/css'>
            .container {
               /* Needs explicit positioning for "absolute" positioning of
                  child elements to work properly */
               position: relative;
               /* Need to set height, because absolute-positioned child elements take up no space */
               height: 50px;
            }
            #div1, #div2 {
                position: absolute;
                left: 0;
                top: 0;
                width: 100px;
                height: 50px;
                /* without a background color, you'll see div1 through div2. */
                background-color: white;
                /* border makes it easier to see while testing */
                border: 1px solid red;
            }
        </style>
        <script type='text/javascript'>
            function swapDivs() {
                var div1 = document.getElementById('div1');
                var div2 = document.getElementById('div2');
                // swap zIndex values.
                var temp = div1.style.zIndex;
                div1.style.zIndex = div2.style.zIndex;
                div2.style.zIndex = temp;
            }
        </script>
    </head>
    <body>
        <div class='container'>
            <div id="div1" style='z-index: 0;'> One </div>
            <div id="div2" style='z-index: 1;'> Two </div>
        </div>
        <input id='switch' type='button' value='switch' onclick='swapDivs();' />
    </body>
</html>

So, from what I read, you just want to show one and hide the other? You can do that with display in css. Here is a way you can do that.

<div id="div1">One</div>
<div id="div2" style="display:none;">Two</div>
<button onClick="change_layer()">Change the Layer</button>


function change_layer(){
   document.getElementById("div1").style.display = "none";
   document.getElementById("div2").style.display = "block";
}

You can also use JQuery, but if that is all you need to do, JQuery probably isn't needed. If you actually want them layered, you would have to use z-index in css.

overlapping can be done by setting position:relative to div1 and having div2 as the child of div1. And set position:absolute; top:0px; left:0px; width:100%; for div2.

<div id="div1">
   <div id="div2"></div>
</div>

javascript -

document.getElementById("div1").onclick = function(){
         //by "Div1 layer to go in the background" i assume you mean disappear or hide
         this.style.display = 'none';
         document.getElementById("div2").style.display = 'block';
};