Как наложить один div на другой div без позиции - PullRequest
Новая
       51

Как наложить один div на другой div без позиции

1 голос
/ 03 апреля 2020

В следующем коде я хочу, чтобы div1 перекрывал div2 при нажатии на div1. Как мне это сделать без использования позиции? А также я хочу выполнить sh, изменив только css в div1. Заранее спасибо. 

<style>
.div1
{ display:'inline-block';}
.div2
{display:'inline-block';}
enter code here
</style>
<script>
function thefunc()
{
//code to overlap div2 from div1 by only changing css of div1
}

<body>
<div id='div1' onClick={()=>thefunc()}></div>
<div id='div2'></div>
</body>

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

Рассмотрим CSS -Сеть, примененную к body

function thefunc() {
  document.querySelector('body').classList.add('overlap');
}
#div1 {
  display: inline-block;
  background: red;
  opacity: .5;
}

#div2 {
  display: inline-block;
  background: blue;
}

div[id] {
  width: 200px;
  height: 200px;
}

.overlap {
  display: grid
}

.overlap div {
  grid-row: 1;
  grid-column: 1;
}

#div1 {
  z-index: 2;
}
<div id='div1' onClick="thefunc()"></div>
<div id='div2'></div>
0 голосов
/ 03 апреля 2020

Использовать отрицательную маржу: 

function thefunc() {
  document.querySelector('#div1').classList.add('overlap');
}
#div1 {
  display: inline-block;
  background: red;
}

#div2 {
  display: inline-block;
  background: blue;
}

div[id] {
  width: 200px;
  height: 200px;
}

.overlap {
  transform:translate(0); /* to make div1 on the top */
  margin-right:-50px; /* adjust this */
}
<div id='div1' onClick="thefunc()"></div>
<div id='div2'></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...