I can never get z-index to work.

gregaryb · November 15, 2023

I won't post my entire code as most of it is irrelevant to the problem.

I have this index.php page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
	
<!-- #BeginTemplate "master.dwt" -->

	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<!-- #BeginEditable "doctitle" -->
		<title>Home</title>
		<!-- #EndEditable -->
		<?php include "common.php"; ?>
		<?php include "common.js"; ?>
		<link href="styles/style.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
			<style>
			
				body 
				{
					color: #000;
					font-family: Arial, Helvetica, sans-serif;
					font-size: small;
					font-style: normal;
					background-image: url('images/background.jpg');
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100%;
				}
				
			</style>
			
		<!-- #BeginEditable "page_styles" -->
			<style>
</style>
		<!-- #EndEditable -->
	</head>
	
	<body onresize="SetPageContetHeight()">
	
		<!-- Begin Masthead -->
		<div class="masthead" id="masthead">
			<img class="logo" alt="" src="images/Tradie.png" width="90" />
			<div class="title" id="title">FIND A TRADIE</div>
			<a class="masthead_button" href="new_tradie.php">TRADIE REGISTRATION</a>
			<a class="masthead_button" href="new_customer">CUSTOMER REGISTRATION</a>
			<a class="masthead_button" href="login.php">LOG IN</a>
			<div class="tag" id="tag">Created by an Australian tradie for Australians</div>
			<!-- Begin Navigation -->
			<nav class="navigation" id="navigation">
				<a class="navigation_link" href="index.php">Home</a>
				<a class="navigation_link" href="benefits.php">Benefits</a>
				<a class="navigation_link" href="about.html">About</a>
					<?php
	
						if (isset($_SESSION["account_id"]) && ($_SESSION["account_id"] != ""))
							echo "<a class=\"navigation_link\" href=\"account.php\">Account</a>\n";
						else
							echo "<a class=\"navigation_link\" href=\"login.php\">Login</a>\n";
							
					?>
					<a class="navigation_link" href="contact.html">FAQ</a>
					<a class="navigation_link" href="contact.html">Contact</a>
			</nav>
			<!-- End Navigation -->
		</div>
		<!-- Begin PageHeading -->
		<div id="page_heading"class="page_heading"><script type="text/javascript">document.write(document.title);</script></div>				
		<!-- End PageHeading -->
		<!-- End Masthead -->
		<!-- Begin Page Content -->
		<div class="page_content" id="page_content">
		
			<form class="advert_form" id="advert_form">
			
				XXXXXXXXXXXXX
			
			</form>
          
				<div class="note" style="flex-wrap: wrap;">
					
					<div>
						<h4>Both customers &amp; tradies need to register and login to use this service.</h4>
						<h5><a href="befits.php">Click here</a> to read the benefits of becoming a member of 'Find a tradie'.</h5>
						<h6>However you can give it a test run here...</h6>
					</div>
					<form method="post" action="index.php" style="width:745px">
						
						<table class="table_no_borders">
							<tr>
								<td style="text-align:right;" class="cell_no_borders">
									<b>What type of tradie are you looking for?</b>
								</td>
								<td class="cell_no_borders">
									&nbsp;&nbsp;&nbsp;<select id="select_trade" name="select_trade">
										<?php DoGeneratePrimaryTradeOptions($_POST["select_trade"]); ?>
									</select>
.....

Of issue is the form at the bottom that starts off as "display: none;"

When I click a button else where on this page I want thos form to become visible but on top of all the other page elements.

Here is the relevent CSS.

.advert_form
{
	display: none;
	position: relative;
	z-index: 999;
	background-color: LightSteelBlue;
	width: 1200px;
	height: 500px;
	border-radius: var(--BorderRadius);
	border-style: solid;
	border-width: medium;
	border-color: var(--NoteHeadingColor);
}

.page_heading
{
	display: inline-block;
	position: relative;
	z-index: 0;
	background-color: var(--LinkColorBG);
	padding: 10px;
	border-radius: var(--BorderRadiusButton);
	margin-top: 10px;
	margin-left: 10px;
	color: var(--LinkColorText);
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-large;
	font-weight: bold;
	text-decoration: underline;
}

.page_content
{
	overflow: auto;
	position: relative;
	z-index: 0;
}

.note
{
	/*display: block;*/
	display: flex;
 	flex-wrap: nowrap;	
 	position: relative;
 	z-index: 0;
 	/*background-color: rgba(255, 255, 255, 0.9);*/
	background-color: var(--NoteColorBG);
	border-radius: 20px;
	padding: var(--Padding);
	margin-left: var(--Margin);
	margin-right: var(--Margin);
	margin-top: var(--Margin);
	margin-bottom: var(--Margin);
	/*box-shadow: 10px 10px rgba(0, 0, 0, 0.65);*/
	box-shadow: 10px 10px rgb(0, 0, 0);
	border-style: solid;
	border-width: thick;
	border-color: var(--LinkColorBG);
}

No matter what I do with the position and z-index properties if surrounding elements, z-index: 999 on my form just does nothing. All the elements below the form are pushed down.

So what else is it that I have to do to make it work as intended?

Sign In

I can never get z-index to work.

Recommended Posts

gregaryb

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity