Page 1 of 1

How do I set a DIV to be on top of everything else?

Posted: Mon Nov 11, 2013 9:40 am
by simonmlewis
I have a site where someone makes a payment - it takes them to a page that runs a script, then forwards them to a product page.

I want on that product page to show a div that said "thanks - it's now live".
I've got a DIV that shows for just 5 seconds, but I want it to overlay everything else. It's only a small div.

What do I do wtih the CSS for that one DIV that makes it go over the top of everything else as z-index isn't doing anything at all, not with Position relative or absolute.

Re: How do I set a DIV to be on top of everything else?

Posted: Tue Nov 12, 2013 2:27 am
by Eric!
I usually lightbox something like that with jquery.

However by using a div with style z-index:1; and position: absolute; you can overlay your div on any other div. Z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index. Note that this property only works with positioned elements.

BTW did you see my comments about the security issue in your last post: viewtopic.php?f=1&t=138668&start=15

Re: How do I set a DIV to be on top of everything else?

Posted: Tue Nov 12, 2013 3:13 am
by simonmlewis

Code: Select all

<div id='helpdiv' class='admin' style='display:block'>
Payment has been made - thank you.
</div>
<script type=\"text/javascript\">
// close the div in 5 secs
window.setTimeout(\"closeHelpDiv();\", 5000);
function closeHelpDiv(){
document.getElementById(\"helpdiv\").style.display=\" none\";
}
</script>
I tried this. It works, in that the div pushes in at the top, and when it goes, everything moves back up again.
However, I did try a position absolute, but that seems not to stop the "pushing down" of everything else, I suppose because is it "display: none", then "displayL: block" ??

How can I get around that?

Re: How do I set a DIV to be on top of everything else?

Posted: Tue Nov 12, 2013 6:09 am
by Celauran
Absolute positioning and a higher z-index should do the trick.

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DevNet Sandbox</title>
		<script>
			function showOverlay() {
				var overlay = document.getElementById('overlay');
				overlay.style.display = 'block';
				window.setTimeout(function() { overlay.style.display = 'none'; }, 2000);
			}
		</script>
		<style>
		#overlay {
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 22;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.7);
			text-align: center;
			display: none;
		}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="overlay"><h1>This text is in the overlay</h1></div>
			<h2>Main</h2>
			<p>This is the main container. The overlay sits on top.</p>
			<ul>
				<li>I'm a list!</li>
				<li>I'm not pushed down!</li>
			</ul>
			<a href="#" onclick="showOverlay();">Show Overlay</a>
		</div>
	</body>
</html>

Re: How do I set a DIV to be on top of everything else?

Posted: Tue Nov 12, 2013 6:15 am
by simonmlewis
Nice, but I need it to show when the page loads, based on a variable in the URL - not on a click.

Re: How do I set a DIV to be on top of everything else?

Posted: Tue Nov 12, 2013 6:20 am
by Celauran
Then simply don't set the initial display value to none and have the timeout fire on load.