Giving every item on the page a z-index?

#1

Hi,

I am trying to add a snow effect to my page. It works fine, except it is appearing on top of some elements of the pages.

Is there a way I can give all the other items a z-index to appear on top of the snow?

I've tried using *{z-index: 2}, but this then messes up some elements of the page and re-orders them.

This is the CSS I'm using for the snow:

#snow{
    background: none;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'),url('http://www.wearewebstars.dk/codepen/img/s2.png'),url('http://www.wearewebstars.dk/codepen/img/s3.png');
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

Or maybe I can make the snow background transparent so only the snow images are visible?

Any suggestions on how to get round this?

Thanks

#2

Hi, @toolman. Has anyone ever told you that HTML and CSS work together, and that CSS without HTML has little meaning? HTML gives a page structure, CSS styles it. You have shown NO HTML again and the barest CSS so we cannot tell anything about the appearance or stacking order of the elements on your page.

Please post code the way you would need to see it if someone asked you to troubleshoot their code. Nothing less. If that is too much to ask, don't worry, I'm pretty sure we'll eventually stop repeating ourselves.

#3

Hi,

There is a lot of HTML on the page, but the way the "snow" is added is by a simple div just after the opening body tag:

<body>
<div id="snow"></div>

followed by a lot of other elements - if you need all the HTML, I can post it, but from the above, the "snow" div is the first element displayed.

#4

What happens if you put all of the "lot of other elements" inside of the "snow" <div> ?

Or maybe simply give the body tag the snow id and not have that div.

#5

OK, to toolman's code, I added a background color to "body".

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/giving-every-item-on-the-page-a-z-index/281433
-->
    <style>
body {background-color:#468;}
#snow {
    background: none;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'),url('http://www.wearewebstars.dk/codepen/img/s2.png'),url('http://www.wearewebstars.dk/codepen/img/s3.png');
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
    </style>
</head>
<body>

<div id="snow"></div>

</body>
</html>

It's a start. I still know nothing about the rest of the content.

Ball's in your park, @toolman, and you have been given a template for a "working page" to make it easier for you to demonstrate the problem in a way that we can see and troubleshoot it.

#6

Thanks, I did a fiddle:
https://jsfiddle.net/29f0kcj1/

As you can see the link is not clickable.

It will be very hard to go through every element of my site and add a z-index depending on whether other items work in conjunction with each other.

I just wondered if there was an easy way around this. I've used jQuery plugins before where this problem didn't happen, but wanted to avoid JS as it's a simple site and wanted it to remain as clean as possible.

#7

Where's the CSS for the anchors?
Can you post a link to a working web page?
Sorry, but I'm rapidly getting tired of begging for code about the rest of the page and only receiving a smidgen.

Use the "working page". Add context.

#8

Here's another "try this". With this I have exceeded my bogey for guesses.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>layers of snow</title>
<!--
https://www.sitepoint.com/community/t/giving-every-item-on-the-page-a-z-index/281433
toolman
-->
    <style>
body {}

body::before {
    content:"";
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:-1;
    background-color:#468;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'),url('http://www.wearewebstars.dk/codepen/img/s2.png'),url('http://www.wearewebstars.dk/codepen/img/s3.png');
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

a {
    display:inline-block;
    vertical-align:middle;
}

    </style>
</head>
<body>

    <a href="#">link</a>
    <p>text</p>

</body>
</html>
#9

It's beginning to look a lot like Christmas

Nice work Ron :slight_smile:

@toolman, I remember doing a falling snow effect on my site one year.
I would want the snow falling across all of my content (rather than behind it) and I would not want the snow div layered on top via z-index. That would make links un-clickable.

I wound up using snow effect javascript since it gave a more natural look without impeding the page function.

#10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.