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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Eric!
DevNet Resident
Posts: 1146
Joined: Sun Jun 14, 2009 3:13 pm

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

Post 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
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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>
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

Nice, but I need it to show when the page loads, based on a variable in the URL - not on a click.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

Then simply don't set the initial display value to none and have the timeout fire on load.
Post Reply