не допускать наложения div на другие div - PullRequest
Новая
       0

не допускать наложения div на другие div

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

Я просмотрел дюжину других похожих вопросов, как этот, но я не думаю, что какие-либо из них достаточно похожи на мой сценарий. Это не моя точная настройка, но я упростила ее, чтобы, надеюсь, было проще объяснить и ответить.

У меня есть 3 деления. Если окно шире 600px, div1 и div2 должны проходить нормально, перемещаться влево, а div3 перемещаться вправо. Используя запрос @media, если окно меньше 600px, div 3 должен появиться над div1 и div2, сдвигая их вниз, чтобы они располагались друг над другом.

Я пытался поэкспериментировать с дисплеем и позиционировать свойства на всех 3-х div, и я не могу понять, как заставить это работать. Я работаю с шаблонной системой, поэтому я не могу добавить контейнер. Я могу работать только с этими 3 делами. 

#id1 {
background: red;
width: 100px;
height: 100px;
}

#id2 {
background: yellow;
width: 100px;
height: 100px;
}

#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}

@media only screen and (max-width: 600px) {
	#id3 {
		float: left;
		position: absolute;
		top: 0px;
		left: 0px;
		}
	}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>

Ответы [ 3 ]

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

Установить position: relative и исправить top / left / right значения: 

#id1 {
  background: red;
  width: 100px;
  height: 100px;
}

#id2 {
  background: yellow;
  width: 100px;
  height: 100px;
}

#id3 {
  background: blue;
  width: 100px;
  height: 100px;
  float: right;
  position: fixed;
  top: 50px;
  right: 20px;
}

@media only screen and (max-width: 600px) {
  #id3 {
    float: left;
    position: relative;
    top: 0;
    left: 0;
    right: unset;
  }
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>

Чтобы сложить div#id3 сверху, вам нужно будет использовать position: absolute и установить собственную верхнюю позицию для всех 3 делений: 

#id1 {
  background: red;
  width: 100px;
  height: 100px;
}

#id2 {
  background: yellow;
  width: 100px;
  height: 100px;
}

#id3 {
  background: blue;
  width: 100px;
  height: 100px;
  float: right;
  position: fixed;
  top: 50px;
  right: 20px;
}

@media only screen and (max-width: 600px) {
  #id1,
  #id2,
  #id3 {
    position: absolute;  
    top: 10px;
    float: none;    
  }
  #id1{ top: 110px; }
  #id2{ top: 210px; }
  #id3{ right: unset; }
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
0 голосов
/ 17 апреля 2020

Я только что нашел идеальное решение для своих нужд. Добавление margin-top к div1 в запросе @media приведет к его увеличению и уменьшению div2: 

@media only screen and (max-width: 600px) {
	#id3 {
		float: left;
		position: absolute;
		top: 0px;
		left: 0px;
		}
    #id1 {
    margin-top: 100px;
    }
	}
0 голосов
/ 17 апреля 2020

Пожалуйста, прочитайте https://developer.mozilla.org/en-US/docs/Web/CSS/order. Надеюсь, это поможет. Если вам нужно, чтобы я объяснил вам это, пожалуйста, дайте мне знать. Я буду рад. 

body {
    display: flex; 
    /* Optional, if you want the DIVs 100% width: */ 
    flex-direction: column;
}

#id1 {
background: red;
width: 100px;
height: 100px;

}

#id2 {
background: yellow;
width: 100px;
height: 100px;

}

#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;

}

@media only screen and (max-width: 600px) {
    
    body > #id3 { order: 1; }
    body > #id1 { order: 2; }
    body > #id2 { order: 3; }
   
    
    #id3 {
		float: left;
		position: relative;
		top: 0px;
        left: 0px;
		}
    }
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <div id="id1">DIV 1</div>
    <div id="id2">DIV 2</div>
    <div id="id3">DIV 3</div>
</body>
</html>

На мой взгляд, это лучшее решение

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...