У меня есть проблема, когда у меня есть два div, которые происходят от одного и того же класса, но с разными идентификаторами. Отобразится только та страница, которая определена в HTML-коде первой (следующее изображение показывает, как выглядит страница, когда leftMenu создается первой).
Вот код HTML, который размещает элементы div:
<body>
<div class = "sideMenu" id = "leftMenu">
leftMenu
</div>
<div class = "sideMenu" id = "rightMenu">
rightMenu
</div>
</body>
Я предполагаю, что моя проблема заключается в отсутствии опыта работы с каскадными таблицами стилей, поэтому я включил весь код в свой файл .css:
* {
background-color: #001005;
color: #00aa00;
font-family: consolas;
margin: 0px;
overflow: hidden;
padding: 0px;
position: relative;
} /* default attributes for all elements */
.sideMenu {
background-color: #00200a;
border: 2px solid #00aa00;
border-bottom: 0px;
border-top: 0px;
min-width: 15vw;
max-width: 20vw;
overflow-y: visible;
width: fit-content;
height: 100vh;
} /* shared attributes of side menus */
#leftMenu {
left: 0vw;
top: 0vh;
} /* attributes for the left menu */
#rightMenu {
left: 100vw;
top: 0vh;
transform: translate(-100%, 0%);
} /* attributes for the right menu */
Вроде бы все должно работать нормально, но это не так. Извините, если это действительно просто, прошли годы с тех пор, как я коснулся HTML, CSS или JS.
2 ответа
Ваш текущий код устанавливает все позиции правильно, но по-прежнему использует position: relative по умолчанию, что означает, что правая навигация будет расположена ниже левой навигации (и вне экрана, поскольку левая навигация 100vh)
Предполагая, что вы хотите, чтобы ваши навигаторы были видны в любой позиции прокрутки на странице, я бы рекомендовал использовать: position: fixed;
* {
background-color: #001005;
color: #00aa00;
font-family: consolas;
margin: 0px;
overflow: hidden;
padding: 0px;
position: relative;
}
.sideMenu {
position: fixed;
background-color: #00200a;
border: 2px solid #00aa00;
border-bottom: 0px;
border-top: 0px;
min-width: 15vw;
max-width: 20vw;
overflow-y: visible;
width: fit-content;
height: 100vh;
}
#leftMenu {
left: 0vw;
top: 0vh;
}
#rightMenu {
left: 100vw;
top: 0vh;
transform: translate(-100%, 0%);
}<body>
<div class="sideMenu" id="leftMenu">
leftMenu
</div>
<div class="sideMenu" id="rightMenu">
rightMenu
</div>
</body>Добавление position: fixed в мой класс .sideMenu устранило проблему (каламбур). Я подумал о том, как относительный будет работать здесь, и немного запутался.
Как я узнал, кто-то еще ответил на вопрос с этим точным изменением, но с включенным кодом, поэтому они получат ответ.
En Español