Использование z-index с относительным и абсолютным позиционированием - PullRequest
Новая
       11

Использование z-index с относительным и абсолютным позиционированием

0 голосов
/ 07 февраля 2020

Я создал JSfiddle, чтобы попытаться продемонстрировать, что я пытаюсь сделать. Извините за двойное использование видео, но, надеюсь, это дает идею. https://jsfiddle.net/alexw129/z1nakg82/16/

Я пытаюсь использовать позиционирование z-index & для создания PNG изображения окна с камином (фон окна и внутри камина удалены так скрыто в изображении PNG). Это ссылка на изображение

image of a window scene with fire place

Я хочу иметь возможность разместить видео снежной сцены на фоне изображения, которое остается относительным к размеру изображения при перемещении экрана (должно занимать 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;
}

1 Ответ

1 голос
/ 07 февраля 2020

Я сомневаюсь, что это именно то, чего вы хотите достичь, но это должно стать хорошей отправной точкой. Есть несколько проблем с вашим CSS. Я расскажу о некоторых из них.

text-align: centre; должно быть text-align: center;. Хотя это работает только с элементами inline и inline-block.

Не существует такой вещи, как position:center-left;. Свойство posititon CSS online принимает static|absolute|fixed|relative|sticky|initial|inherit.

. Вы должны использовать position:absolute, если хотите расположить элементы друг над другом или просто расположить их вне потока документов.

position:relative; используется для родительского элемента элемента с position:absolute. Элемент с абсолютным позиционированием затем позиционирует себя относительно этого родительского элемента. Корректировка абсолютного элемента позиции может быть выполнена с помощью свойств top,right,bottom,left CSS.

Просмотрите стили CSS height:0;padding-bottom:75%. Варьируя нижнюю часть отступа, вы можете сохранять пропорции divs при масштабировании. 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...