Question:

How do I position a div right over an area, rather than having it push everything down when it is visible?

by | earlier

I have a webpage that I have a div on. I display it under certain conditions. When I display it, is there a way to display it over the content that is already there? Right now, it pushes everything below it down. I'd like it to instead display over the other content.

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

1 ANSWERS

Sort By: Date | Rating

I believe what you may need to do is have the items that are always displayed in their own div which is relatively positioned. Then have the info you want to toggle placed in another div which is positioned absolutely and place this div inside of the relative positioned div. Give the absolutely positioned div a top and left location inside the relative div to place it where you want it. You should now be able to toggle the display property of the absolute div from :none to :block and have it appear over the relative div's contents.

I hope that sets you on the right path!

Here is an example, try this out:

<!DOCTYPE -don't forget to use one of these

<html>

<head>

<title></title>

<style type="text/css">

* { margin:0; padding:0; }

#relat { width:300px; position:relative; }

#absol { color:red; width:120px; position:absolute; top:10px; left:25px; display:none; }

p { padding:8px; }

</style>

<script type="text/javascript">

var count=0;

function showdiv()

{

its = document.getElementById("absol");

if (count%2 == 0) /***determines odd or even clicks and runs the if statement on even number, count variable must be outside function***/

{

its.style.display = "block";

count++;

}

else /*** on odd numbered clicks ***/

{

its.style.display = "none";

count++;

}

}

</script>

</head>

<body>

<div id="relat"><p>This is a bunch of stupid random boring text which I just thought up all by myself because I am bored and don't have anything else to do at this particular moment and I am just trying to see how long I can logically make this sentence without goofing it up or making it too totally stupid, oops I think I just did!</p>

<div id="absol"><p>Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah.</p></div>

</div>

<p><a href="#" onclick="showdiv()">Click here to toggle the hidden content on and off</a></p>

</body>

</html>

Give the "absol" div a background color or something if you want it to cover what's behind it if using text.

If you have any questions or wish to do something differently feel free to e-mail me with further details.
Report (0) (0) | earlier