Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preventing relatively positioned div from pushing down content

Tags:

html

css

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>
like image 209
user1810414 Avatar asked Nov 08 '12 20:11

user1810414


2 Answers

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.

like image 92
James Montagne Avatar answered Oct 31 '22 02:10

James Montagne


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>
like image 30
gotohales Avatar answered Oct 31 '22 03:10

gotohales