Адаптивное позиционирование

110
03 мая 2021, 10:50

Имеется вот такой блок (на фото), кот находится на заднем фоне и когда наводишь на видео он появляется (поварачивается под определенным углом), как мне правильно разместить кота чтобы он находился на одном месте и адаптивно ?

Спасибо.

Answer 1

Как вариант, так

.block-container { 
  position: relative; 
  display: inline-block; 
  margin: 100px; 
} 
 
.block { 
  width: 300px; 
  height: 300px; 
  background-color: blue; 
  z-index: 2; 
  position: relative; 
} 
 
.block-red { 
  position: absolute; 
  right: -50px; 
  width: 100px; 
  height: 100px; 
  top: 100px; 
  background-color: red; 
  z-index: 1 
}
<div class="block-container"> 
  <div class="block"></div> <!-- блок с видео --> 
  <div class="block-red"></div> <!-- блок с котом --> 
</div>

READ ALSO
Input как реализовать after?
CSS

Input как реализовать after?

 89
Как сделать проверку на наличие недопустимого слова?
c++

Как сделать проверку на наличие недопустимого слова?

Как сделать следующее:

 115
Компилятор выводит ошибку &ldquo;&#39;min&#39; was not declared in this scope&rdquo;
c++

Компилятор выводит ошибку “'min' was not declared in this scope”

Я тут написал код, вроде все правильно но компилятор c++ 14 выводит:

 115
Проблема c #include C++
c++

Проблема c #include C++

у меня есть два класса Player и MapEditor , в классе Player я использую MapEditor, а в MapEditor я использую PlayerЯ забыл как называется это проблема но когда я пишу...

 92