时间戳

首页 > 解决方案 > 使用具有相对和绝对定位的 z-index

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

问题描述

我创建了一个 JSfiddle 来尝试演示我正在尝试做的事情。原谅重复使用视频，但希望它给出了这个想法。https://jsfiddle.net/alexw129/z1nakg82/16/

我正在尝试使用z-index& 定位来生成PNG带有壁炉的窗口图像（窗口背景和壁炉内部被删除，因此在 PNG 图像中被空白）。这是图片的链接

带有壁炉的窗户场景的图像

我希望能够在图像的背景中放置一个雪景视频，随着屏幕的移动（应该占据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;
}

标签： htmlcssz-index

解决方案

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

text-align: centre;应该是text-align: center;。虽然这只适用于内联和内联块元素。

没有这样的事情position:center-left;。位置 CSS 属性 online 接受static|absolute|fixed|relative|sticky|initial|inherit.

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

position:relative;用于带有 的元素的父元素position:absolute。然后，绝对定位元素将相对于该父元素定位自身。可以使用top,right,bottom,leftCSS 属性对位置绝对元素进行调整。

查看 .css 的 CSS 样式height:0;padding-bottom:75%。改变底部填充允许您在缩放时保持 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>

推荐阅读