使用具有相对和绝对定位的 z-index

Question

我创建了一个 JSfiddle 来尝试演示我正在尝试做什么。请原谅重复使用视频，但希望它能提供思路。 https://jsfiddle.net/alexw129/z1nakg82/16/

我正在尝试使用 z-index 和定位来生成 window 的 PNG 图像，其中有壁炉（window 背景和壁炉内部被删除，因此在 PNG 图像中被消隐）。这是 link 图片

我希望能够在图像背景中放置一个雪景视频，随着屏幕移动（应该占据 80% 屏幕），它相对于图像大小保持不变。

我还想要一个火的视频作为壁炉的背景，它需要保持在相对于图像的正确位置。有没有人对我如何实现这一目标有任何想法？

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;
}

Answer 1

我怀疑这正是您想要实现的目标，但这应该是一个很好的起点。您的 CSS 存在一些问题。我将介绍其中的一些。

text-align: centre; 应该是 text-align: center;。尽管这只适用于行内和行内块元素。

当您想要将元素放置在另一个元素之上或只是将其放置在文档流之外时，您应该使用 position:absolute。

position:relative; 用在带有 position:absolute 的元素的父元素上。绝对定位的元素然后将相对于该父元素定位自己。可以使用 top,right,bottom,left CSS 属性调整绝对位置元素。

查看 height:0;padding-bottom:75% 的 CSS 样式。改变填充底部允许您在缩放时保持 div 纵横比。

.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>

使用具有相对和绝对定位的 z-index

Using z-index with relative and absolute positioning

html

css

z-index