I have removed all unnecessary elements from my webpage to focus on reproducing a specific issue.
HTML:
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home | Minimal</title>
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Core.css" />
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Home.css" />
</head>
<body>
<header>
<img id="key" src="~/Shared/Assets/Images/Icons/K.png" alt="Sign In | Create an Account" />
<img id="logo" src="~/Shared/Assets/Images/Logos/JWLSS.png" alt="Minimal" />
</header>
<div id="main">
<footer>
<p style="margin-top: 100px; text-align: center; color: white;">© Minimal 2015</p>
</footer>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
outline: none;
border: none;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url('../Images/Backgrounds/JWSSB.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position-y: 50%;
}
header
{
width: 100%;
height: 50%;
background-color: #2695D7;
opacity: 0.90;
}
#main
{
height: 50%;
background-color: white;
opacity: 0.90;
border-top: 0.1px solid white;
padding-top: 5%;
position: relative;
}
#key
{
float: right;
}
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
z-index: 1000;
}
#sections
{
width: 50%;
height: auto;
margin: 0 auto;
}
.section
{
width: calc(100% / 3);
height: auto;
float: left;
text-align: center;
font-size: 10pt;
}
The issue is with the positioning of the logo element in relation to other sections of the page. The logo should be displayed above all other elements but fails to do so in certain browsers.
Attempts to resolve this include adding position: relative; to parent elements and avoiding negative z-index values, but these have not solved the problem.
If you have any suggestions on how to make the absolutely-positioned logo appear above everything else, please let me know.