How can I prevent relatively positioned div from pushing down content that follows? In following example I am trying to display a small green div on top of a bigger red one but the next red div gets pushed down when the green div appears.
If there is a better way of doing this, I'd appreciate tips.
Here is a running example: http://jsfiddle.net/38Rqh/
<html>
<head>
<style type="text/css" media="screen">
.top {
display: none;
background-color: green;
width: 100px;
position: relative;
top: -50px;
}
.bottom {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
}
.bottom:hover + div {
display: block;
}
</style>
</head>
<body>
<div class="bottom">
</div>
<div class="top">Displaying data</div>
<div class="bottom">
</div>
<div class="top">Displaying data</div>
<div class="bottom">
</div>
<div class="top">Displaying data</div>
</body>
</html>
relative
still takes up space. What you need is absolute
. One possibility is to set your .bottom
elements to position: relative
and then place the .top
elements within them and position them absolutely.
http://jsfiddle.net/38Rqh/1/
.top {
display: none;
background-color: green;
width: 100px;
position: absolute;
top: 150px;
}
.bottom {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
position: relative;
}
.bottom:hover .top {
display: block;
}
<div class="bottom">
<div class="top">Displaying data</div>
</div>
<div class="bottom">
<div class="top">Displaying data</div>
</div>
In this way, the .top
elements will be positioned in relation to their containing .bottom
.
This has the added benefit of not hiding the .top
when hovering on the .top
itself, causing the flicker you see in your example.
I may have mixed this up with what should be appearing where, but using wrapper divs and position absolute instead of relative will get rid of the extra space.
<html>
<head>
<style type="text/css" media="screen">
.top {
display: none;
background-color: green;
width: 100px;
position: absolute;
bottom: 50px;
}
.bottom {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
}
.bottom:hover + .top {
display: block;
}
.wrapper { position: relative; }
</style>
</head>
<body>
<div class="wrapper">
<div class="bottom">
</div>
<div class="top">Displaying data</div>
</div>
<div class="wrapper">
<div class="bottom">
</div>
<div class="top">Displaying data</div>
</div>
<div class="wrapper">
<div class="bottom">
</div>
<div class="top">Displaying data</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With