CODEWITHSUNDEEP
htmlcssz-index
Alex W
Alex W

Reputation: 91

Using z-index with relative and absolute positioning

I created a JSfiddle to try and demonstrate what I'm trying to do. Excuse the duplicate use of video, but hopefully it gives the idea. https://jsfiddle.net/alexw129/z1nakg82/16/

I'm trying to use the z-index & positioning to generate a PNG image of window with a fire place (window background and inside the fire place is deleted so is blanked out in the PNG image). This is a link to the image

image of a window scene with fire place

I want to be able to place a video of snowy scene in the background of the image, which stays relative to the size of image as the screen moves (should take up 80% of the screen).

I also want a video of a fire as background to the fireplace, which would need to stay positioned in the correct place relative to the image. Does any body have any ideas on how I could achieve this?

HTML

<!doctype html>

<html>

<head>
  <link rel="stylesheet" href="normalise.css">
  <link rel="stylesheet" href="style.css">

</head>

<body>


  <div class="main-header">

    <p> This is the header</p>

  </div>

  <div class="container">

    <img src="images/pic3.png">

    <video class="snow" autoplay controls>
                    <source src="videos/vid1.mov" type="video/mp4">
                </video>

    <video class="fire" autoplay controls>
                    <source src="videos/vidfire.mp4" type="video/mp4">
                </video>

  </div>

  <footer class="main-footer">
    <p> This is the footer </p>

  </footer>

  <video class="fire" autoplay controls>

                </video>

</body>

</html>

CSS

.container {
  width: 80%;
  margin: 0 auto;
  // background-color:blue;
  height: 1000px;
  text-align: centre;
  text-align: centre;
}

.snow {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
}

.fire {
  position: relative;
  width: 940px;
  z-index: 2;
  position: center-left;
  bottom: 500px;
  left: 715px;
  height: 350px;
}

.container img {
  position: relative;
  z-index: 3;
  width: 80%;
  text-align: centre;
}

.main-header {
  background-color: yellow;
}

.main-footer {
  background-color: green;
}

Upvotes: 0

Views: 2165

Answers (1)

WizardCoder
WizardCoder

Reputation: 3461

I doubt this is exactly what you want to achieve, but it should be a good starting point. There is a few issues with your CSS. I will cover a few of them.

text-align: centre; should be text-align: center;. Although that only works with inline and inline-block elements.

There is no such thing as position:center-left;. The posititon CSS property online accepts static|absolute|fixed|relative|sticky|initial|inherit.

You should use position:absolute when you want to position elements on top of one another or just to position it outisde of the document flow.

position:relative; is used on a parent element of an element with position:absolute. The absolute positioned element would then position itself relative to that parent element. Adjustments to the position absolute element can be done with top,right,bottom,left CSS properties.

Look in to the CSS styles of height:0;padding-bottom:75%. Varying the padding bottom allows you to retain a divs aspect ratio when scaled.

.container {
  width:80%;
  position:relative;
  height:0;
  padding-bottom:75%;
}
.fire, .snow, .container img {
  width:100%;
  position: absolute;
  top:0;
  left:0;
  right: 0;
}
.snow {
  z-index:1;
}
.fire {
  z-index:2;
}
.container img {
  z-index:3;
  max-width:100%;  
  height:auto;
}
<div class="container">
  <img src="https://i.postimg.cc/qByLfxBJ/pic3.png">
  <video class="snow" autoplay controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <video class="fire" autoplay controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
</div>

Upvotes: 2

Related Questions