Сменить позицию элемента относительно размеров другого

Question

У меня есть див (в родительском), при уменьшении окна он наезжает на текст <p>, который находится в другом диве (но в том же родительском, что и "n' див). Я написал медиа запрос, но не учёл одной вещи - самый главный див, в котором находятся все остальные, может менять размер, т.е. если его размер будет увеличен (он будет почти во всё окно в ширину), то мой див не будет наезжать на текст до условия медиа запроса (max-width) и запрос будет бесполезен. Что можно предпринять в моём случае?

function Nav() {
  if (!$(".navbar").hasClass("navbar closed")) {
    const btns = document.querySelectorAll(".btns");
    btns.forEach(query => {
      query.classList.add("closed");
    })
    const page = document.querySelectorAll(".mainpage");
    page.forEach(query => {
      query.style.marginLeft = "180px";
    })
    document.getElementById("navigationbar").style.width = "60px";
    document.getElementById("navigationbar").classList.add("closed");
  } else {
    const page = document.querySelectorAll(".mainpage");
    page.forEach(query => {
      query.style.marginLeft = "";
    })
    const btns = document.querySelectorAll(".btns");
    btns.forEach(query => {
      query.classList.remove("closed");
    })
    document.getElementById("navigationbar").classList.remove("closed");
    document.getElementById("navigationbar").style.width = "";
  }
}

function Page() {
  $(".mainpage").slideToggle(100);
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  min-width: 100%;
  min-height: 100%;
  transition: 0.5s;
}

.wrap {
  max-width: 100%;
  min-width: 250px;
  overflow: hidden;
  padding-bottom: 50px;
}

.button {
  float: right;
  margin-top: 40px;
  margin-right: 40px;
}


/*Боковое меню */

div.navbar {
  border-radius: 15px;
  box-shadow: 4px 5px 40px #EEEEEE;
  position: relative;
  width: 309px;
  left: 40px;
  margin-top: 130px;
  padding: 20px 20px 20px 20px;
  transition: 0.5s;
  overflow: hidden;
  font-size: 18px;
}

.navbar .btns {
  padding: 15px 20px 15px 20px;
  text-decoration: none;
  font-size: 18px;
  color: #479FF8;
  display: block;
  height: 22px;
  border-radius: 10px;
  border: 1px solid #ffffff00;
}

.navbar .btns:focus {
  background-color: #479FF8;
  color: #f1f1f1;
}

.navbar .btns:hover {
  outline: 1px solid #c4c4c4;
}

.border {
  margin-top: 2px;
  margin-bottom: 2px;
  height: 1px;
  background-color: #999;
}

.btns.closed .title {
  color: transparent;
  overflow: hidden;
  transition: 0.1s;
}

.title {
  transition: 0.5s;
}


/* Главная страница */

#h2con,
.title span {
  margin-left: 20px;
}

#sharix,
#drive,
#assist {
  width: 22%;
  height: 22%;
}

#dpcvvs {
  text-indent: 0;
  padding-left: 20px;
}

#page1_border {
  height: 1px;
  color: #fff;
}

#page #label_2,
#page #label_3 {
  box-shadow: 4px 5px 40px #EEEEEE;
}

#txt_1 {
  font-size: 14px;
}

.mainpage {
  border-radius: 12px;
  margin-right: 40px;
  margin-left: 429px;
  margin-top: -677px;
  position: relative;
  transition: 0.5s;
  max-width: 100%;
  display: none;
  border-color: #eeeeee;
}

.services {
  border-radius: 6px;
  width: 170px;
  height: 35px;
  max-width: 100%;
  min-width: 80px;
}

.filter {
  float: right;
  margin-right: 40px;
  margin-top: -60px;
  overflow: hidden;
  max-width: 100%;
  transition: 0.5s;
}

#selectitle {
  padding-top: 5px;
  padding-bottom: 5px;
}

#addbtn {
  border: none;
  background-color: #479FF8;
  font-weight: bold;
  border-radius: 6px;
  color: #fff;
  width: 234px;
  height: 35px;
  float: right;
  margin-right: 20px;
  margin-top: -34px;
  transition: 0.5s;
}

#addbtn:focus {
  border: 2px solid #111;
  background-color: #178BFF;
}

#addbtn:hover {
  cursor: pointer;
}

.mainpage {
  padding: 0px;
}

.mainpage>input {
  display: none;
}

.mainpage>div {
  display: none;
  padding: 12px;
  border: 1px solid #eee;
  background: #FFFFFF;
  border-radius: 0px 12px 12px 12px;
  box-shadow: 4px 5px 40px #EEEEEE;
}

.mainpage>label {
  display: inline-block;
  padding: 11px 10px 10px 10px;
  margin: 0 -5px -1px 0;
  text-align: center;
  color: #000000;
  border: 1px solid #eee;
  background: #fefefe;
  cursor: pointer;
  border-radius: 12px 12px 0px 0px;
}

.mainpage>input:checked+label {
  color: #000000;
  border: 1px solid #eee;
  border-bottom: 1px solid #FFFFFF;
  background: #FFFFFF;
}

#page1:checked~#txt_1,
#page2:checked~#txt_2,
#page3:checked~#txt_3 {
  display: block;
}

.status {
  width: 0;
}


/* Адаптивное изменение */

@media screen and (max-width: 868px) {
  #footer {
    height: 120px;
    position: relative;
  }
  #col4 {
    float: left !important;
    ;
    margin-left: 20px;
  }
  #span4 {
    margin-right: 20px;
  }
  #col3 {
    margin-right: 20px;
  }
}

@media screen and (max-width: 574px) {
  #footer {
    height: 240px;
    position: relative;
  }
  #span4 {
    margin: 0!important;
  }
  #col1,
  #col2,
  #col3,
  #col4 {
    float: none !important;
  }
  #col1,
  #col2,
  #col3,
  #col4 {
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px!important;
  }
}

@media screen and (max-width: 1200px) {
  .mainpage {
    float: left;
    margin-top: 40px;
    margin-left: 40px!important;
    margin-right: 40px;
  }
}

@media screen and (max-width: 1917px) {
  .maintable th,
  .maintable td {
    padding-right: 17px!important;
  }
}

@media screen and (max-width: 1245px) {
  .maintable {
    max-width: 100%;
  }
  .switch {
    left: 35px;
    transition: .4s;
  }
  #gg1 {
    left: 31px!important;
    transition: .4s;
  }
}

@media screen and (max-width:1321px) {
  .maintable th,
  .maintable td {
    padding-right: 10px!important;
    transition: .4s;
  }
}

@media screen and (max-width: 450px) {
  #navigationbar {
    margin-top: 75px;
    left: 20px;
  }
  .navbar.closed {
    width: 65px!important;
  }
  .mainpage {
    margin-left: 20px!important;
  }
}

@media screen and (max-width:475px) {
  #addbtn {
    float: left;
    margin-left: 20px;
    margin-top: 25px;
  }
}

@media screen and (max-width: 750px) {
  #gg1 {
    left: 6.9px!important;
  }
  .switch {
    left: 10px;
  }
}

@media screen and (max-width:700px) {
  #txt_1 {
    overflow: auto;
  }
}

@media screen and (max-width:690px) {
  .maintable {
    min-width: 548px;
  }
}

<!DOCTYPE html>
<html lang="en-RU">

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <script src="./script.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" type="text/css" href="./style.css">
  <title>Мои связи</title>
</head>

<body>
  <div class="wrap">
    <div id="navigationbar" class="navbar">
      <a href="#" class="btns" onclick="Nav()">
        <p id="parrow">
        </p>
      </a>
      <div class="border"></div>
      <a href="#" class="btns">
        <span class="title">&nbsp;Главная/баланс</span>
      </a>
      <a href="#" class="btns">
        <span class="title">&nbsp;Платежная информация</span>
      </a>
      <a href="#" class="btns">
        <span class="title">&nbsp;История платежей</span>
      </a>
      <a href="#" class="btns">
        <span class="title">&nbsp;Курсы</span>
      </a>
      <a href="#" class="btns">
        <span class="title">&nbsp;Личная информация</span>
      </a>
      <a href="#" class="btns">
        <span class="title">&nbsp;Управление сервисами</span>
      </a>
      <a href="#" class="btns" id="connections" onclick="Page()">
        <span class="title">&nbsp;Мои связи</span>
      </a>
      <a href="#" class="btns" id="connections" onclick="Page()">
        <span class="title">&nbsp;Сотрудничество</span>
      </a>
      <a href="#" class="btns">
        <span class="title">&nbsp;Техподдержка</span>
      </a>
      <a href="#" class="btns">
        <span class="title">&nbsp;Мои заявки</span></a>
    </div>
    <div class="mainpage">
      <input type="radio" name="page_btn" value="" checked id="page1">
      <label for="page1" for="page1"><img id="sharix" src="./logos/sharix.png"   alt="ShariX">&nbsp;ShariX<border id="page1_border"></border></label>
      <input type="radio" name="page_btn" value="" id="page2">
      <label for="page2" for="page2"><img id="assist" src="./logos/assist.png" alt="Assist">&nbsp;Assist</label>
      <input type="radio" name="page_btn" value="" id="page3">
      <label for="page3" for="page3"><img id="drive" src="./logos/drive.png" alt="Drive">&nbsp;Drive</label>
      <div id="txt_1">
        <div class="title">
          <br>
          <h2 id="h2con">Мои связи</h2>
          <br>
          <br>
          <span>&nbsp;Доступно во всех сервисах</span>
          <br>
          <br>
          <p id="dpcvvs">&nbsp;Доступно для планирования цепочек во всех сервисах</p>
        </div>
        <button id="addbtn">Добавить пользователя</button>
        <div class="filter">
          <h4 id="selectitle">Сервисы</h4>
          <select class="services">
            <option value="all">&nbsp;Все</option>
            <option value="1">&nbsp;Сервис</option>
            <option value="2">&nbsp;Сервис</option>
            <option value="3">&nbsp;Сервис</option>
          </select>
        </div>
      </div>
      <div id="txt_2">
        <p>Вторая вкладка Вторая вкладкаВторая вкладкаВторая вкладкаВторая вкладкаВторая вкладка</p>
      </div>
      <div id="txt_3">
        <p>fdgdgfgdgdfк</p>
        <p>мfdgdgfdgfdgjukkikuykuyu kyukyukyukyukyjtuykyuk
        </p>
      </div>
    </div>
  </div>
</body>

</html>

Что мог вырезал, проблемный див ".filter", ну и кнопка тоже рядом с ним, id параграфа, на который он наезжает - "dpcvvs". Главное окно вызывается на кнопку "мои связи", в меню самая верхняя кнопка над линией - закрыть меню (типа) и увеличение размера основного дива.

и да, медиа запрос (бесполезный) я удалил, но думаю понятно

Если это вопрос дубль, у меня глупая ошибка, которая лежит на поверхности, напишите пожалуйста в комментарии, буду благодарен любой помощи.

БЛОГ НА HUSL

Сменить позицию элемента относительно размеров другого

Ответы (0 шт):