БЛОГ НА HUSL


Как сделать, чтобы div не съезжал при открытии?

Автор вопроса: danilious

помогите пожалуйста! Когда открываю какой-либо из элементов, то они съезжают вверх. Спасибо.

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
function myFunction2() {
    document.getElementById("myDropdown_2").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn_2')) {

    var dropdowns = document.getElementsByClassName("dropdown-content_2");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
* {
    margin: 0;
    padding: 0;
}
body {
    background: #0f0c29;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
a{
  color:  #fff;
  text-decoration: none;
}

/* Dropdown Button */
.dropbtn {
    background-color: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
/* Dropdown button on hover & focus */
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 22%;
    margin-top: 5%;
    font-family: Raleway;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    
    min-width: 160px;
    z-index: 2;
    margin-left: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  position:relative;
  animation: show 1s ease-in-out;
  }
.show::before {
  animation: show 1s ease-in-out;
  position: absolute;

}
@keyframes show {
  0% {
    opacity: 0
  }
  100%
}
.dropbtn_2 {
    background-color: none;
    color: white;
    font-size: 16px;
    cursor: pointer;

}
/* Dropdown button on hover & focus */

/* The container <div> - needed to position the dropdown content */
.dropdown_2 {
    position: relative;
    display: inline-block;
    margin-left: 22%;
    margin-top: 5%;
    font-family: Raleway;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content_2 {
    display: none;
    min-width: 160px;
    z-index: 2;
    margin-left: 10px;
}
/* Links inside the dropdown */
.dropdown-content_2 a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content_2 a:hover {background-color: }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display:block;
  animation: show 1s ease-in-out;
  }
.center_block_2 {
  margin-top: -75px;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
#square {
  height: 250px;
  width: 13%;
  margin-left: 35%;
  margin-top: 125px;
  border-radius: 0px 0px  25px 25px;
      background-color: #f0f0f0; /* Цвет фона */
  position: absolute; 
  font-family: Raleway,sans-serif;
  
}

.servers {
  position: absolute;
  width: 80%;
  margin-top: 10%;
  margin-left: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TurboSamp - каталог читов</title>
    <link rel="stylesheet" href="css/catalog.css">
    <script src="js.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500&family=Raleway:wght@500&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap" rel="stylesheet">
    <!-- <link rel="stylesheet" type="text/css" href="css/adaption.css"> -->
    <link rel="stylesheet" href="css/adaptive.css">
    <script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
    <script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
    <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 3, width: "224", color1: '666666', color2: 'FCFCFC'}, 175352269);
    </script>
</head>
<body>

    <div class="inner__page" style="height: 1000px;">
    <div class="container">
        <div class="servers">
            <div class="center_block">
            <div class="under_block">
                <div class="dropdown">
                  <img src="https://img.icons8.com/ios/20/ffffff/controller.png"/>
                  <a onclick="myFunction()" class="dropbtn">SA:MP сервера</a>
                  <div id="myDropdown" class="dropdown-content">
                    <a href="#">Arizona RP</a>
                    <a href="#">Diamond RP</a>
                    <a href="#">Advance RP</a>
                  </div>
                </div>          
            </div>
        </div>
        <div class="center_block_2">
            <div class="under_block_2">
                <div class="dropdown_2">
                  <img src="https://img.icons8.com/ios/20/ffffff/controller.png"/>
                  <a onclick="myFunction2()" class="dropbtn_2">CR:MP сервера</a>
                  <div id="myDropdown_2" class="dropdown-content_2">
                    <a href="#">Radmir RP</a>
                    <a href="#">Amazing RP</a>
                    <a href="#">Namalsk RP</a>
                  </div>
                </div>          
            </div>
        </div>
    </div>
    </div>
    </div>
</div>
    </div>  
</body>
</html>


Источник

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

Автор решения: Depchik

Мне в вашем коде достаточно сложно ориентироваться но если убрать из участка ниже

.center_block_2 {
  margin-top: -75px;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

margin-top и flex-direction то сдвиги вверх прекращаются. Советую вам воспользоваться онлайн редактором codly в нем будет легче поиграться с кодом так как результат будет отображаться сразу после изменений.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.