Position Relative of Child Div pushes other Parent Buttons

Question

(I really didn't know how to title this. Anyway!)

I have a couple of HTML buttons stacked vertically, which I consider the parent level. When you hover over a button, I have a div (or the child level) appear to the right of the button. To force the div to the right, I use position:relative;...

position:relative;
top:-25px;
left:200px;

but the buttons underneath the hovered button get pushed down like the div existed below the button.

How can I show the child div without the buttons being pushed down, while keeping the tops of the parent button and child div lined up?

Here's a jsfiddle as an example: http://jsfiddle.net/8Mbyu/

score 1 · Answer 1 · answered Apr 03 '13 at 22:38

1

Are you against using absolute positioning or is that ok? jsFiddle here.

.hiddenButtons { /*blue div*/
    display:none;
    background:#0af;
    width:100px;
    padding:5px;
    text-align:center;
    position:absolute;
    top:9px;
    left:210px;
}

answered Apr 03 '13 at 22:38

dsgriffin

66,495
17
137
137

I'm not against it, but I'd like for the top of the parent button and the top of the child div to line up. I'll edit my question. – Matt Hansen Apr 03 '13 at 22:40
Your absolute comment gave me an idea and I found a solution. – Matt Hansen Apr 04 '13 at 15:38
@StoneRanger Really? great! What did you do in the end? – dsgriffin Apr 04 '13 at 15:39

score 1 · Accepted Answer · edited May 23 '17 at 12:03

After a night of thinking about it, I figured I could use absolute positioning in conjunction with getting the position of the parent button via javascript:

In action: http://jsfiddle.net/8Mbyu/8/

.hiddenButtons { /*blue div*/
    display:none;
    background:#0af;
    width:100px;
    padding:5px;
    text-align:center;
    position:absolute;
    left:210px;
}

And the javascript:

$('.parentButton').hover(function () {
    $('.hiddenButtons').hide();
    var childID = '#' + this.id + 'Child';
    var rect = document.getElementById(this.id).getBoundingClientRect();
    var top = rect.top;
    $(childID).css("top", top+1);
    $(childID).show();
});

Thanks https://stackoverflow.com/a/11396681/1178486 !

I'm open to seeing cleaner solutions.

Position Relative of Child Div pushes other Parent Buttons

2 Answers2