I have a jquery toggler on the very top of my page that will eventually open up to reveal a form. The problem is that when the panel expands it will push down all the content under it instead of the panel going over the content. How do I make sure the panel expands over the content instead of pushing it down?
I only have the basic slidetoggle function set up:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>this will be a form</p>
</div>
<p class="flip">sign up!</p>
</body>
</html>
I have a jquery toggler on the very top of my page that will eventually open up to reveal a form. The problem is that when the panel expands it will push down all the content under it instead of the panel going over the content. How do I make sure the panel expands over the content instead of pushing it down?
I only have the basic slidetoggle function set up:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>this will be a form</p>
</div>
<p class="flip">sign up!</p>
</body>
</html>
2 Answers
Reset to default 6You can try something with position:absolute.
Check out this jsfiddle.
As partkyle said, use absolute positioning, and you will probably also want to also use z-index "layering" in your css to specify which element shows on top.