CSS - Hover a container without pushing further elements down

Question

I wanted to create a small form with some checkboxes which are only visible when the mouse cursor hover this container.
The hover effect and the container inside are no problem.
But there are more elements after that checkboxes and when I hover every element below is moving down because the container with the checkboxes has a height. But when I say no height:auto or 100% when I hover then I can't reach more then one checkbox.

<form>
<input type="text" name="something">
<div class="cb-container">
  <input type="checkbox" name="first" value="first">
  <input type="checkbox" name="second" value="second">
  <input type="checkbox" name="third" value="third">
</div>
<input type="submit">
</form>

<style type="text/css">
  .cb-container {
    height:25px;
    overflow:hidden;
    position:relative;
    z-index:1;
  }
  .cb-container:hover {
    display:block;
    height:auto;
    overflow:visible;
    position:relative;
    z-index:1;
  }
</style>

Some opening animation would be nice, but that is another task for me. For the first I would like to understand why I can't open the container over e.g. the submit button instead of pushing him down.

Answer 1

This may help you ! http://jsfiddle.net/13cjn242/

.cb-container {
 height:25px;
 opacity:0;
}
.cb-container:hover { 
 opacity:1;
}