让div坚持到其他div的一边

Question

I'm trying to make a div appear to slide out to the right of another div, using jQuery.

I've based my solution on this answer , by using position:absolute , and getting the position of the trigger element in jQuery, and positioning the popover accordingly.

You can see the result of what I have so far on this JSFiddle I have made: Result / Source .

The problem is, because the popover div uses position:absolute , if I resize the page, or a scrollbar appears / disappears - the popover becomes mis-aligned to the trigger div.

How can I make the popover div stick to the right-side of the trigger div?

Answer 1

Rather than relying on jQuery for this, you can make two elements stick together in CSS by making them inline elements, forcing them to touch, and setting the CSS of the container to white-space: nowrap .

HTML:

<div id="main">
    <p>If the draw is popped out, and you resize the page, it breaks, because it has position:absolute</p>
    <div id="clickable">
        <div id="trigger">
            <span>Click here - click away to hide</span>
        </div><div id="pop">
            <span>Now Resize Page</span>
        </div>
    </div>
</div>

Note that </div><div id="pop"> is not a typo. To force inline elements to touch, you need to remove all whitespace in your markup.

CSS:

#main {
    width:300px;
    margin:50% auto;
    margin-top:0;
    margin-bottom:0;
    background-color:#EEE;
    padding:10px;
}
#clickable { white-space: nowrap; }

#trigger {
    background-color: #FFF;
    width: 100%; 
    border: 4px solid #ddd;
    display: inline-block; }
#trigger span { margin: 5px; display: block; }

#pop {
    background-color: #333;
    color: #EEE;
    height: 38px;
    opacity: 0;
    display: none; }
#pop span { 
    margin: 10px; 
    display: block; }

JS:

$('#trigger').click(function(event) {
    event.stopPropagation();
    var width = $(this).outerWidth();
    var offset = $(this).offset();
    var top = (offset.top+4)+'px';
    var left = (offset.left+width)+'px';
    $('#pop').css({
        'top' : top,
        'left' : left,
        'display' : 'inline-block',
        'opacity' : 0,
        'width' : 0
    }).animate({
        'width' : '140px',
        'opacity' : 1
    });
});

$('html').click(function(event) {
    if (!($(event.target).closest('#pop').length)) {
        $('#pop').animate({'width':0,'opacity':0},500,
                           function() {
            $(this).hide();
        });
    }
});

Preview: http://jsfiddle.net/Wexcode/4kg2W/3/

Answer 2

将触发器div与position：relative和其中的popover一起放置为position：absolute，这样，popover将具有绝对位置，但总是相对于触发器div。

Answer 3

You could adjust the positioning when the browser resizes:

$(window).resize(function(){
    $("#trigger").trigger('click');
});

Answer 4

你可以使用位置属性

<div style="position: absolute;right:-10px ;top:0"></div>