HTML CSS z-index, laying and positions
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
0
down vote
favorite
Evening,
I am starting a web project for a friend and am having trouble laying three objects, a logo, rgba background-color and a H1.
The order I want is logo at the back with the opaque color overtop and completed with a heading 1 on top.
I've read online about position having an effect on z-index and that a background color is considered z-index 0. 
Really keen on any input and suggestions. Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Conductive Life</title>
<!--Set initial JQuery mobile & responsiveness-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.4.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--Custom styles and -->
<link rel="stylesheet" type="text/css" href="Styles/custom.css">
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<h1>
Improving the Quality </br>
of Life with </br>
Conductive Eduction
</h1>
</header>
</body>
</html>
START OF CSS
*
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
body
font-size: 14px;
header
position: relative;
width: 100%;
background-color: rgba(135,196,66,0.60);
text-align: center;
z-index: 0;
.logo
z-index: -10;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
h1
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%)
html css html5
asked Aug 2 at 19:22
Duncan Skilton
12
add a comment |Â
up vote
0
down vote
favorite
Evening,
I am starting a web project for a friend and am having trouble laying three objects, a logo, rgba background-color and a H1.
The order I want is logo at the back with the opaque color overtop and completed with a heading 1 on top.
I've read online about position having an effect on z-index and that a background color is considered z-index 0.
Really keen on any input and suggestions. Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Conductive Life</title>
<!--Set initial JQuery mobile & responsiveness-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.4.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--Custom styles and -->
<link rel="stylesheet" type="text/css" href="Styles/custom.css">
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<h1>
Improving the Quality </br>
of Life with </br>
Conductive Eduction
</h1>
</header>
</body>
</html>
START OF CSS
*
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
body
font-size: 14px;
header
position: relative;
width: 100%;
background-color: rgba(135,196,66,0.60);
text-align: center;
z-index: 0;
.logo
z-index: -10;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
h1
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%)
html css html5
asked Aug 2 at 19:22
Duncan Skilton
12
add a comment |Â
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Evening,
I am starting a web project for a friend and am having trouble laying three objects, a logo, rgba background-color and a H1.
The order I want is logo at the back with the opaque color overtop and completed with a heading 1 on top.
I've read online about position having an effect on z-index and that a background color is considered z-index 0.
Really keen on any input and suggestions. Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Conductive Life</title>
<!--Set initial JQuery mobile & responsiveness-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.4.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--Custom styles and -->
<link rel="stylesheet" type="text/css" href="Styles/custom.css">
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<h1>
Improving the Quality </br>
of Life with </br>
Conductive Eduction
</h1>
</header>
</body>
</html>
START OF CSS
*
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
body
font-size: 14px;
header
position: relative;
width: 100%;
background-color: rgba(135,196,66,0.60);
text-align: center;
z-index: 0;
.logo
z-index: -10;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
h1
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%)
html css html5
asked Aug 2 at 19:22
Duncan Skilton
12
Evening,
I am starting a web project for a friend and am having trouble laying three objects, a logo, rgba background-color and a H1.
The order I want is logo at the back with the opaque color overtop and completed with a heading 1 on top.
I've read online about position having an effect on z-index and that a background color is considered z-index 0.
Really keen on any input and suggestions. Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Conductive Life</title>
<!--Set initial JQuery mobile & responsiveness-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.4.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--Custom styles and -->
<link rel="stylesheet" type="text/css" href="Styles/custom.css">
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<h1>
Improving the Quality </br>
of Life with </br>
Conductive Eduction
</h1>
</header>
</body>
</html>
START OF CSS
*
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
body
font-size: 14px;
header
position: relative;
width: 100%;
background-color: rgba(135,196,66,0.60);
text-align: center;
z-index: 0;
.logo
z-index: -10;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
h1
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%)
html css html5
asked Aug 2 at 19:22
Duncan Skilton
12
asked Aug 2 at 19:22
Duncan Skilton
12
asked Aug 2 at 19:22
Duncan Skilton
12
asked Aug 2 at 19:22
Duncan Skilton
12
12
add a comment |Â
add a comment |Â
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f200853%2fhtml-css-z-index-laying-and-positions%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
