Как поместить элементы div по бокам экрана поверх остального содержимого страницы? - PullRequest
Новая
       18

Как поместить элементы div по бокам экрана поверх остального содержимого страницы?

0 голосов
/ 15 января 2020

Итак, я пытаюсь создать браузерную игру и хочу добавить 24 кнопки по 12 с каждой стороны экрана. Независимо от того, что я делаю (например, изменяя свойство position родительского и дочернего элементов div для каждой возможной опции), остальная часть веб-содержимого перемещается ниже кнопок. 

<div id="buttonsContainer">
    <div class="button">There are 24</div>
    <div class="button">buttons in total</div>
    <div class="button">But I included</div>
    <div class="button">Only 5</div>
    <div class="button">For demostration</div>
</div>

Я включил плохо нарисованный план того, чего я хочу достичь. Содержимое сайта и кнопки находятся на разных div одного уровня.

Ответы [ 2 ]

0 голосов
/ 16 января 2020

Вы можете попробовать применить position: fixed к вашему контейнеру. Идея состоит в том, чтобы позиционировать ваш контейнер как фиксированный элемент, но он будет потреблять наши события нажатия, поэтому добавьте к нему pointer-events: none;, а затем восстановите их по кнопкам. 

#buttonsContainer {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: space-between;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#buttonsContainer button {
  pointer-event: auto;
}
0 голосов
/ 16 января 2020

Как то так? 

body {
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: purple;
}

main {
  padding: 2rem;
  position: relative;
}

.block-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 0;
}

.block-list li {
  padding: 1rem;
  background: white;
  margin: .5rem;
  list-style: none;
  width: 100%;
  text-align: center;
}

.side-buttons {
  position: absolute;
}

.side-buttons li {
  list-style: none;
  color: purple;
  background: yellow;
  margin: .25rem;
}

#right {
  right: 0;
  top: 0;
}

#left {
  left: 0;
  top: 0;
}
<body>
  <main>
    <ul class="block-list">
      <li>block</li>
      <li>block</li>
      <li>block</li>
    </ul>
    <ul class="block-list">
      <li>block</li>
      <li>block</li>
      <li>block</li>
    </ul>
    <ul class="block-list">
      <li>block</li>
      <li>block</li>
      <li>block</li>
    </ul>
  </main>
  <ul class="side-buttons" id="left">
    <li>side button left</li>
    <li>side button left</li>
    <li>side button left</li>
  </ul>
  <ul class="side-buttons" id="right">
    <li>side button right</li>
    <li>side button right</li>
    <li>side button right</li>
  </ul>
</body>
...