This question already has answers here:
Why isn't z-index working here
(3 answers)
Closed 8 years ago.
So I've got a div that I want to appear in front of every other div on the page. Here's all my code:
<!DOCTYPE html>
<html>
<head>
<title>Koowalk Game Development - Home</title>
<link rel="stylesheet" href="koowalk.css"/>
</head>
<body>
<h4 id="header">KOOWALK</h4>
<h4 id="headerb">GAMES</h4>
<p>Hello. We're Koowalk Games. We make games.</p>
<div id="work">
<p id="workheader">Games</p>
<div id="workbar"></div>
<script type="text/javascript">
var bar = document.getElementById("workbar");
var x = 0;
window.onload = change;
function change() {
requestAnimationFrame(color);
}
function color() {
bar.style.background = "hsl(" + x + ", 100%, 50%)";
if (x < 358) {
x++;
requestAnimationFrame(color);
}
else {
x = 0;
requestAnimationFrame(color);
}
}
</script>
<div class="workleft">
<p class="headerleft">Some Game</p>
<p class="pleft">This will be some kind of description of the game. There will also be a picture to the left. Cause I know how much you love pictures. I'm in bio. Dransfield is about to yell at me. Except he isn't. Why am I writing this, you might ask? Just think appearences. It's all about the appearences.</p>
</div>
<div id="sliding1"></div>
</div>
</body>
</html>
And the CSS:
#font-face {font-family: "Veger"; src: url('Fonts/Veger(light).ttf'); }
#font-face {font-family: "Kloe"; src: url('Fonts/ff4a_kloe_thin-web.ttf'); }
::selection {
background-color: #e2e2e2;
color: white;
}
::-moz-selection {
background-color: hsl(0, 0%, 89%);
color: white;
}
body {
background: #5a5a5a;
font-family: Veger;
color: white;
text-align: center;
}
#header {
font-size: 100px;
color: #49ffdc;
}
#headerb {
font-size: 100px;
margin-top: -145px;
color: #ffff63;
}
p {
font-family: Kloe, sans;
font-size: 40px;
margin-left: 15%;
margin-right: 15%;
margin-top: -40px;
}
#work {
position: absolute;
left: 0px;
right: 0px;
margin: 0;
padding: 0;
width: 100%;
height: 500px;
background: #ff4545;
margin-top: 100px;
}
#workheader {
font-family: Kloe, sans;
font-size: 80px;
margin-top: 10px;
}
#workbar {
float: left;
width: 50%;
margin-left: 25%;
margin-right: 25%;
height: 3px;
margin-top: -70px;
background: hsl(0, 100%, 50%);
}
.workleft {
float: left;
width: 40%;
margin-left: 3%;
margin-top: -20px;
height: 300px;
background: #5a5a5a;
color: white;
font-family: Kloe, sans;
text-align: right;
}
.headerleft {
margin-right: 5%;
font-size: 50px;
margin-top: -5px;
}
.pleft {
margin-right: 5%;
margin-left: 50%;
font-size: 15px;
}
#sliding1 { //This is the div that needs to appear in front of everything
z-index: 2;
width: 47%;
height: 10px;
color: #06168d;
}
As you can see, #sliding1 is the div I need to get in front of everything else. I've never used z-index before. The div is showing up, but it's behind everything. How do you use z-index exactly?
EDIT: This is not duplicate. I looked at most of the other questions, and all the answers that were provided didn't work. I now have position: absolute and it is still not working.
In order to use z-index you have to add position to the element.
#sliding1 {
z-index: 2;
position: relative;
}
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only effects elements that have a position
value other than static (the default).
Reference: css-tricks
Related
I'm relatively new to creating websites and I had an HTML/CSS questions I hope someone could help me with!
I noticed that in Safari and Google Chrome, my grey box is not where it is supposed to be (I assume because I made the .veryouter a fixed px, but when I tried to use percentages and resized the page and changed the page sizing, my text box started to move off the page! I'm trying to have everything stay in place when resizing the window, so I'm unsure if changing it to percentage is the answer or not..) I have attached pictures to show the difference, Chrome is it vertically centered while on Safari it isnt). //The code snippet looks odd, sorry about that!
Thank you for any help :) I appreciate it]1
html{
height: 97%;
}
body{
background-image: url("Metakingpic.png");
background-size: 1300px;
min-width: 1080px;
height: 100%;
}
.veryouter{
height: 589px;
}
#outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
align-items: center;
}
#inner{
position: relative;
background-color: #696969;
opacity: .5;
height: 540px;
width: 370px;
}
h1{
margin-top: 40px;
margin-bottom: 0;
}
p{
margin-top: 40px;
margin-right: 10px;
}
.words{
font-family: 'Londrina Outline', cursive;
color: #ffffff;
font-size: 55px;
line-height: 50px;
letter-spacing: 5px;
padding-left: 23px;
}
.font2{
font-family: 'Slabo 27px', serif;
color: #ffffff;
font-size: 23px;
line-height: 32px;
letter-spacing: 2px;
margin-left: 20px;
}
.image{
height: 114px;
width: 174px;
position: absolute;
bottom: 0;
right: 0;
z-index: 100;
font-size: 25px;
}
.arrow{
position: absolute;
bottom: 0;
right: 0;
padding-right: 15px;
padding-bottom: 15px;
z-index: -1;
}
.n{
padding-top: 25px;
font-weight: bold;
color: white;
width: 125px;
text-align: center;
font-size: 30px;
font-family: 'Londrina Outline', cursive;
position: relative;
letter-spacing: 5px;
}
a{
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href = "intro.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Londrina+Outline" rel="stylesheet">
</head>
<body>
<div class = "veryouter">
<div id = "outer">
<div id = "inner">
<div class = "words">
<h1>My <br></br>PHOTO<br></br>BOOK</h1>
</div>
<div class = "font2">
<p> Press "NEXT" to continue! </p>
</div>
</div>
</div>
</div>
<div class = "image">
<a href = "https://www.facebook.com/" >
<div class = "n">NEXT</div>
</a>
<img class = "arrow" src = "Arrow.png" atl = "Arrow"/>
</div>
</body>
</html>
This is most likely because those two browsers have different default css rules, I would recommend using a css reset, either use https://meyerweb.com/eric/tools/css/reset/ or https://github.com/necolas/normalize.css/
If you're not familiar with these reset css - they basically normalize the default browser styles. I personally prefer using normalize.css on all my projects.
To align the container center need to add the following style :
#outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
margin-top: 20px;
display: -webkit-box;
-webkit-box-pack: center; /* justify-content */
-webkit-box-align: center; /* align-items */
}
#inner{
position: relative;
background-color: #696969;
opacity: .5;
height: 100%;
width: 370px;
}
Hope the changes will help.Try this code and let me know if any concern.
I followed this tutorial:
https://www.youtube.com/watch?v=on7p8oqfv80
I cannot seem to add background image to a class. This image link does work, I have opened in browser and I have also previously added it using "img src=", directly into the html. It works.
I know the stylesheet is being linked properly, because the style of the text changes.
I have tried adding a width, using single quotes instead of double quotes, tried using background-image instead of background. I have tried using a local image and yes I am on Linux and yes I have chmod 777 on all files in that directory, just to be sure. I have tried all of the different solutions offered across these following links:
Cannot add background image to my <div>
How to add background image in css?
Cannot add background image to my <div>
Tried this on Firefox, Chrome and IE across Linux, Windows and Mac.
Here is the code
var errorCallback = function(e) {
console.log('Reeeeejected!', e);
};
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
if (navigator.getUserMedia) {
navigator.getUserMedia(
{
audio: true,
video: true
},
function(stream)
{
video.src = window.URL.createObjectURL(stream)
},
errorCallback);
} else {
video.src = 'somevideo.webm';
}
* {
margin: 0;
padding: 0;
border: 0;
}
h1 {
text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;
}
h2 {
text-align: center;
font-size: 275%;
color: #E5E5E5;
text-transform: uppercase;
letter-spacing: 1
}
}
/*---Start Parallex---*/
.parallax {
float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;
background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
*/ background-size: 100% 100%;
width: auto;
}
.parallax-inner {
padding-top: 50%;
padding-bottom: 50%;
}
<h1> Space </h1>
<section class="parallex">
<div class="parallex-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>
It's a typo issues like in your style sheet you are designing parallax but when you added the class to the section you added parallex correct your style sheet and it will work:
*{
margin: 0;
padding: 0;
border: 0;
}
h1 {
text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;
}
h2 {
text-align: center;
font-size: 275%;
color: #E5E5E5;
text-transform: uppercase;
letter-spacing: 1
}
.parallex {
float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;
background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
background-size: 100% 100%;
width: auto;
}
.parallex-inner {
padding-top: 50%;
padding-bottom: 50%;
}
*{
margin: 0;
padding: 0;
border: 0;
}
h1 {
text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;
}
h2 {
text-align: center;
font-size: 275%;
color: #E5E5E5;
text-transform: uppercase;
letter-spacing: 1
}
/*---Start Parallex---*/
.parallex{
float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;
background: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
background-size: 100% 100%;
width: 100%;
}
.parallax-inner{
padding-top: 50%;
padding-bottom: 50%;
}
<body>
<h1> Space </h1>
<section class="parallex">
<div class="parallex-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>
</body>
I fond some spelling errors and syntax errors.
Hope this will help you abit on the way!
I tried your code using a local image file and found that the background image display but when it is passed directly(either to section or div)
<section style="background-image: url('049.JPG');" class="parallex">
<div class="parallex-inner">
<h2>Space</h2>
</div>
</section>
I have to add that using the correct classes as suggested here already and removing */(surely a bug) after your background-image declaration returned me no positive result...apart from when I tried directly
I'm trying to make menubar at the top of my website.
It should looke like this:
The red square is my button.
My problem is that my headline and my button are not in the same line. So I tried to use a table but then there are both aligned to the left.
After that I used float: right; for my button.
It is now aligned right but in the next line.
How can I fix it so my button and my headline are in the same line and aligned like my picture.
HTML:
<div id="topbar">
<h1>Fahrplan</h1>
<button type="button" id="settings"></button>
</div>
CSS:
h1 {
height: 44px;
margin: 0;
color:#FFFFFF;
text-align: center;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 44px;
}
#topbar button {
height: 20px;
width: 20px;
float: right;
}
For this kind of scenarios, you might consider using positions.
#topbar {
position: relative;
}
h1 {
margin: 0;
color:#FFFFFF;
text-align: center;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 44px;
background: #99f;
}
#topbar button {
height: 20px;
width: 20px;
position: absolute;
top: 50%;
right: 5px;
margin-top: -10px;
}
<div id="topbar">
<h1>Fahrplan</h1>
<button type="button" id="settings"></button>
</div>
Here I have given position to both #topbar and the button. The #topbar has a relative position and button has an absolute position:
#topbar {
position: relative;
}
button {
position: absolute;
top: 50%;
right: 5px;
margin-top: -10px;
}
And I have also adjusted the button to be vertically centred by using the negative margin of half the height. Hope this helps.
I would rather suggest you to use absolute along with translateY() to align your button vertically middle.
Demo (Note: Am using SCSS on jsFiddle so don't get confused with the syntax)
header {
height: 40px;
background: tomato;
position: relative;
h4 {
line-height: 40px;
text-align: center;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
}
}
Explanation:
I am using position: absolute; to move your button to the right. As far as vertical centering goes for your button, you can use top: 50% and transform to nudge your button exactly in the middle of your header vertically. It will always stay vertically centered without you declaring any static height.
For your interest, here's how to do it with inline-blocks.
div > * {
display:inline-block;
vertical-align:middle;
}
h1 {
width:100%;
text-align:center;
margin-right:-40px;
background-color:#4F81BD;
color:#FFF;
font-family: Helvetica, sans-serif;
font-size: 16px;
height: 44px;
}
button {
height: 30px;
width: 30px;
margin-right:-6px;
border: 3px solid #8C3836;
border-radius:5px;
background-color:#C0504D;
}
<div id="topbar">
<h1>Fahrplan</h1>
<button type="button" id="settings"></button>
</div>
Here is a quick demo of how to do this using http://tachyons.io
<div class="bg-light-gray dt w-100">
<div class="dtc v-mid w3"></div>
<div class="dtc v-mid tc pv3">
<h1 class="mv0 f5">Headline</h1>
</div>
<div class="dtc v-mid tr w3 pr2">
<button class="bg-black br2 h2 w2"></button>
</div>
</div>
CSS:
.br2 {
border-radius: .25rem;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.h2 {
height: 2rem;
}
.w2 {
width: 2rem;
}
.w3 {
width: 4rem;
}
.w-100 {
width: 100%;
}
.bg-black {
background-color: #111;
}
.bg-light-gray {
background-color: #eee;
}
.pr2 {
padding-right: .5rem;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0rem;
}
.tr {
text-align: right;
}
.tc {
text-align: center;
}
.f5 {
font-size: 1rem;
}
.v-mid {
vertical-align: middle;
}
Demo:
https://jsfiddle.net/r21mdrzs/
The downside is that you include an empty div. The plus side is that even if you zoom in or out, change font-size or size of button, everything will always be aligned to the middle, not matter what. This is in my experience is less brittle than using magic number values for positioning.
Give your headline float property;
.classNameGiveToHeading {
float: left;
}
.buttonClassName {
float: right;
}
OR give "float:right" to both of them as you like.
This is the code of my html in this when I set the #login id to float right it just overlap the #about-blog id.
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
position: absolute;
z-index: 1;
}
Here is the full code {below the code I have provided more information}
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kvians-Home</title>
<style type="text/css">
body {
background-color: #F0FFF0;
color: rgb(255,255,255);
font-family: monospace;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
.main-heading {
background-color: #0048ba;
text-align: center;
font-size: 35px;
font-weight: bold;
margin: 0px;
}
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
position: absolute;
z-index: 1;
}
/* all about links */
a{
background-color: #00FF00;
color: #00693E;
font-weight: Bold;
font-size: 25px;
}
a:visited{
background-color: #DFFF00;
color: #FF7F00;
}
a:hover{
background-color: #91A3B0;
color: rgb(0,0,0);
}
.left-margin{
margin-left: 5px;
}
/* all about links*/
</style>
</head>
<body>
<!--facebook SDK-->
<!-- Facebook SDK end-->
<!--page begin-->
<h1 class="main-heading">Here You Will Get</h1>
<!--Main Body Design-->
<div id="about-blog">
<h2 class="left-margin">School Feeds</h2>
<p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
<a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
</div>
<div id="login">
<h2>Login</h2>
<p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
</div>
</body>
</html>
how can I set the login to right And just overlap the about blog by a few pixles.
if you are using position:absolute try right:0 instead of float:right and left:0 instead of float:left
if you are using position:absolute you can't use floating cos the element is detached of the document that's why floating property won't work.
You can use right:0 or left:0 and the element will be forced to go left or right of the document.
Your float doesn't work because you also use position: absolute.
I removed position: absolute, as it will just give you problems down the road, and added float: left to #about-blog, this way, if you want to add any extra info, it will flow properly.
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
float: left; /* added */
z-index: 1;
}
body {
background-color: #F0FFF0;
color: rgb(255,255,255);
font-family: monospace;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
.main-heading {
background-color: #0048ba;
text-align: center;
font-size: 35px;
font-weight: bold;
margin: 0px;
}
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
float: left;
z-index: 1;
}
/* all about links */
a{
background-color: #00FF00;
color: #00693E;
font-weight: Bold;
font-size: 25px;
}
a:visited{
background-color: #DFFF00;
color: #FF7F00;
}
a:hover{
background-color: #91A3B0;
color: rgb(0,0,0);
}
.left-margin{
margin-left: 5px;
}
/* all about links*/
<!--facebook SDK-->
<!-- Facebook SDK end-->
<!--page begin-->
<h1 class="main-heading">Here You Will Get</h1>
<!--Main Body Design-->
<div id="about-blog">
<h2 class="left-margin">School Feeds</h2>
<p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
<a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
</div>
<div id="login">
<h2>Login</h2>
<p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
</div>
You can do margin-left: auto; to that element using id
Try this code:
#login{
background-color: #00FFFF;
float: right;
clear: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
I added clear: right; on it, I think it will work!
I am having trouble with finding my link. When I open up my html and css in the file, I cannot visibly see it (I believe it is stuck under my div, even though the z-index is higher?) I am not entirely sure why, any help would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="Stylesheet" href="Stylesheet.css" />
<title>Derpycats.com</title>
</head>
<body>
<!--Background (Carbon Fibre)-->
<body background="background.jpg" alt="Background" />
<!--Header-->
<h1 id="header">DerpyCats.com</h1>
<div id="headerdiv"></div>
<!---Links-->
Home
</body>
</html>
CSS:
/* Sets the pixel density to "fill browser" */
* {
width: 100%;
height: 100%;
}
/* Heading */
#header {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #D9411E;
z-index: 2;
position: fixed;
font-size: 50px;
bottom: -50px;
}
/* CSS for the heading div */
#headerdiv {
border-radius: 5px;
z-index: 1;
position: fixed;
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
/* Css for the links */
a {
z-index: 3;
font-family: Verdana, sans-serif;
}
/* CSS for the normal paragraphs */
.paragraph {
color: white;
font-family: Courier, serif;
}
P.S. I don't believe this matters, but I am on OSX using sublime text 2.
I didnt understand what are you trying to do but, #headerdiv overlays your link.
You can give z-index = -1 value to your #headerdiv to send it back.
little Change in css will work here
#headerdiv {
border-radius: 5px;
z-index: 1;
/*position: fixed; this is creating problem*/
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}