Как переключить два деления в HTML - PullRequest
Новая
       0

Как переключить два деления в HTML

0 голосов
/ 27 февраля 2019

Предположим, у меня есть два div, которые перекрывают друг друга. Я хочу поменять местами два div.Без каких-либо изменений в коде.Как можно поменять местами два div'а?

Ответы [ 3 ]

0 голосов
/ 27 февраля 2019

Для этого можно использовать порядок flexbox.

От MDN :

Свойство order CSSустанавливает порядок размещения элемента в контейнере flex или grid.Элементы в контейнере сортируются по возрастанию значения заказа, а затем по порядку их исходного кода.

Посмотрите эту демонстрацию.Откройте его в режиме «Полная страница» и измените размер экрана до 400px, чтобы поля начинали перекрываться.Используя порядок, я поменял или переключил div s без необходимости каких-либо JavaScript.

enter image description here

html, body {
  margin: 0;
}

.container {
  display: flex;
  width: 500px;
  max-width: 100%;
  border: 1px solid red;
  justify-content: space-between;
}

.container > * {
  position: relative;
  width: 200px;
  height: 100px;
}

.container > *::after {
  position: absolute;
  bottom: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  color: black;  
}

.left {
  background-color: green;  
}

.left::after {
  content: 'left';
}

.right {
  background-color: blue;
}

.right::after {
  content: 'right';
}


@media screen and (max-width: 400px) {
  .left {
    order: 1;    
  }
  
  .left::after {
    content: 'right';
  }
  
  .right::after {
    content: 'left';
  }
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

jsFiddle

0 голосов
/ 06 марта 2019

Вы можете использовать Z-индекс для решения этой проблемы 

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>The z-index Property</h1>

<img src="w3css.gif" width="100" height="140">

<p>Because the image has a z-index of -1, it will be placed behind the heading.</p>

</body>
</html>
0 голосов
/ 27 февраля 2019

Вы хотите поменять местами видимость div?С z-index вы можете поставить 1 деление над другим. 

.red, .blue {
  width: 200px;
  height: 100px;
  position: absolute;
}
.red {
  background: red;
  z-index: 1;
}
.blue {
  background: blue;
  top: 50px;
}
<div class="red"></div>
<div class="blue"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...