javascript - Overlaying <div> on another (dynamically positioned) <div> - Stack Overflow

admin管理员组

文章数量:1336331

DEMO

I know SO has well over few dozen questions that ask something similar to what I stated in the title but my challenge is somewhat unique as I'll explain below. I have a set of div blocks arranged as follows:

HTML:

<div id='container'>
    <div id='left-pane'>Left pane</div>
    <div id='right-pane'>
        <div id='right-top-content'>Right top</div>
        <div id='right-bottom-content'>Right bottom</div>
    </div>
</div>
<button id='showlayer'>Add layer</button>
<div id='orphan'>Boo...I'm a blue layer!</div>

What I'm trying to do here is to overlay a layer (another div block) right on top of the div#right-pane so that the areas labeled as "Right top" (light blue) and "Right bottom" (green) get pletely covered. The resulting layout will look like the following:

Seems pretty straightforward but there are a couple of caveats. First, both div elements in the #right-pane should remain in place (i.e., should stay only hidden under the overlaid div); meaning the following approach doesn't do me any good:

$("#right-pane").empty().append($("#orphan"));

Second, the width of the "Left pane" will dynamically change, so the positioning of the overlay div will need to be dynamically adjusted as well (I think). As you can see in my jsFiddle demo (see above), the overlay div has 'absolute' positioning along with a z-index value, which seems to be the most mon approach for overlaying an element. This sort of works but both the "top" and "left" values can/will change.

So, what's the best way to tackle this challenge? I might be able to just calculate the "left" and "top" position of the overlay div if I have to, but is there a more elegant way of acplishing it?

DEMO

I know SO has well over few dozen questions that ask something similar to what I stated in the title but my challenge is somewhat unique as I'll explain below. I have a set of div blocks arranged as follows:

HTML:

<div id='container'>
    <div id='left-pane'>Left pane</div>
    <div id='right-pane'>
        <div id='right-top-content'>Right top</div>
        <div id='right-bottom-content'>Right bottom</div>
    </div>
</div>
<button id='showlayer'>Add layer</button>
<div id='orphan'>Boo...I'm a blue layer!</div>

What I'm trying to do here is to overlay a layer (another div block) right on top of the div#right-pane so that the areas labeled as "Right top" (light blue) and "Right bottom" (green) get pletely covered. The resulting layout will look like the following:

Seems pretty straightforward but there are a couple of caveats. First, both div elements in the #right-pane should remain in place (i.e., should stay only hidden under the overlaid div); meaning the following approach doesn't do me any good:

$("#right-pane").empty().append($("#orphan"));

Second, the width of the "Left pane" will dynamically change, so the positioning of the overlay div will need to be dynamically adjusted as well (I think). As you can see in my jsFiddle demo (see above), the overlay div has 'absolute' positioning along with a z-index value, which seems to be the most mon approach for overlaying an element. This sort of works but both the "top" and "left" values can/will change.

So, what's the best way to tackle this challenge? I might be able to just calculate the "left" and "top" position of the overlay div if I have to, but is there a more elegant way of acplishing it?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 17, 2014 at 20:03 BinaryCat asked Sep 17, 2014 at 20:00 BinaryCatBinaryCat 1,30022 gold badges1717 silver badges3232 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

It's really simple. You need to also use position: relative. Add it to #right-pane and then make #orphan a child of #right-pane.

How absolute positioning works is the top and left attributes correlate to the top and left corner of the first non-static parent. That would be #right-pane because we gave it position:relative. Relative positioning doesn't effect flow or change the rendered position unless you add top, left, etc. to it, so our parent isn't effected. We have to change it to relative (or absolute or fixed) because the default is position:static. Hopefully that all makes sense.

Demo

#right-pane {
    width:300px;
    float:left;

    position: relative;
}

Edit: I also changed the #orphan style rule to use percent based width and height. You can do that because of the absolute positioning with the relative parent. Both top, left, right, and bottom and width and height bee relative to the parent.

#orphan {
    width:100%;
    height:100%; /* changed width and height to be dynamic */
    display:none;
    background:blue;
    color:white;
}

Change your jQuery like this:

$("#showlayer").click(function () {

    $("#orphan").css({
        'position': 'absolute',
            'display': 'block',
            'z-index': '10',
            'top': 0,
            'right': 0
    });

    /* This solution seems to work but not quite!
    $("#orphan").css({
        'float': 'left',
        'display': 'inline'
    });
    $("#right-pane")
        .empty()
        .append($("#orphan"));
    */
});

and then move the #orphan div and make some tiny changes in your CSS, see fiddle

If you use:

display: table-cell; /*(IE8+) for the columns*/
display: table; /*for the wrapper*/

your divs will works like a TABLE adapting size automatically only with css.

Fiddle http://jsfiddle/5u3deqka/5/

You could use the offset method to get the top and left of #right-pane:

$("#orphan").css({
    'position': 'absolute',
    'display': 'block',
    'z-index': '10',
    'top': $('#right-pane').offset().top,
    'left': $('#right-pane').offset().left
});

Here is a fiddle

本文标签： javascriptOverlaying ltdivgt on another (dynamically positioned) ltdivgtStack Overflow