Абсолютный дочерний элемент внутри относительного родителя, а затем снова все внутри абсолютного родителя. - PullRequest
Новая
       7

Абсолютный дочерний элемент внутри относительного родителя, а затем снова все внутри абсолютного родителя.

0 голосов
/ 11 февраля 2020

Я знаю, название, извините, но это имеет смысл. В конечном итоге я пытаюсь создать контейнер, «не связанный» с телом, который по-прежнему учитывает ограничения по размеру, где я могу получить sh некоторые сообщения. 

<div id="big-container">
    <div class="wrapper">
        <div id="child">
        </div>
    </div>
</div>

Более подробно, я пытаясь вывести sh child, то есть absolute div, внутри #big-container, который также absolute. Чтобы мои child действительно привязались к big-container, так как они оба absolute, я решил ввести относительные классы-обертки. Стиль таков: 

#big-container {
    position: absolute;
    z-index: 3; /* higher over everything else on the site */
}

.wrapper {
    position: relative;
}

#child {
    position: absolute;
}

Теперь все работает отлично и отлично. За исключением ... только сам по себе. Видите ли, я хочу отправить sh эти child в контейнер только для того, чтобы я на самом деле не собирал другие div-значения / нормальный поток. В конце концов, они полностью оторваны от потока. Но если я сделаю это, все, что находится под #big-container, станет непригодным для использования, потому что оно скрыто от него. Давайте посмотрим на это в действии: 

body {
  width: 960px;
  height: 100%;
}

#big-container {
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.wrapper {
  display: block;
  width: 100%;
  height: inherit;
  position: relative;
  padding: 12px;
}

#child {
  background-color: red;
  border: 1px solid black;
  color: white;
  position: absolute;
}
<body>
  <h3> This is some content from the site!</h3>
  <p>...and some more!</p>
  <div id="big-container">
    <div class="wrapper">
      <div id="child">
        I am the child! Try to select anything below me, see if it works.
      </div>
    </div>
  </div>
</body>

Что мне здесь не хватает? Мне кажется, что сама разметка неверна. Все, что я пытаюсь сделать, это быть внимательным к другим и просто хранить мои сообщения в одном месте.

Ответы [ 3 ]

0 голосов
/ 11 февраля 2020

Я решил это. Это должно работать так? 

body {
  width: 960px;
  height: 100%;
}

#page {
  position: relative;
  z-index: 1;
}

#big-container {
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.wrapper {
  display: block;
  width: 100%;
  height: inherit;
  position: relative;
  padding: 12px;
}

#child {
  background-color: red;
  border: 1px solid black;
  color: white;
  position: absolute;
  z-index: 2;
}
<body>
  <div id="page">
    <h3> This is some content from the site!</h3>
    <p>...and some more!</p>
  </div>
  <div id="big-container">
    <div class="wrapper">
      <div id="child">
        I am the child! Try to select anything below me, it actually works.
      </div>
    </div>
  </div>
</body>

#page имеет z-index из 1. Это самая базовая c, самая низкая и самая элементарная ценность. Не существует z-index для #big-container, поэтому мы не навязываем #child любому z-index, тогда мы go впереди и устанавливаем для него z-index выше #page.

Я не уверен, что это лучше, но это работает.

0 голосов
/ 11 февраля 2020

Все, что я изменил, это CSS вашего big-container. И нижний текст теперь можно выбрать.

Проблема в том, что:

Ваш элемент слоя big-container слишком большой, что охватывает всю страницу, поэтому ваш щелкните только на этом элементе

Что вам нужно:

только для создания слоя более высокого уровня, который отображает ваше сообщение pu sh

a) поэтому вам не нужен фактический элемент, полностью выложенный плиткой, а только слой, поэтому вам не нужны ширина и высота 100%.

b) ваша wrapper требует ширину 100%, что означает от родителя, поэтому оставьте свой родительский 100% ширины.

c) ваше сообщение должно отображаться, так что просто разрешите любое переполнение на big-container 

body {
  width: 960px;
  height: 100%;
}

#big-container {
  display: block;
  height: 0;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  overflow: display;
}

.wrapper {
  display: block;
  width: 100%;
  height: inherit;
  position: relative;
  padding: 12px;
}

#child {
  background-color: red;
  border: 1px solid black;
  color: white;
  position: absolute;
}
<body>
  <h3> This is some content from the site!</h3>
  <p>...and some more!</p>
  <div id="big-container">
    <div class="wrapper">
      <div id="child">
        I am the child! Try to select anything below me, see if it works.
      </div>
    </div>
  </div>
</body>
0 голосов
/ 11 февраля 2020

Учитывая ваш желаемый результат, я вставлю ваш контейнер в начало тела, используйте vh и vw, чтобы определить высоту и ширину, и сохраните ваш контейнер в потоке. 

#big-container {
  margin:0;
  display:block;
  width:100vw;
  height:100vh;
}

let page = document.getElementsByTagName('body')[0]
let container = document.createElement('div')
container.setAttribute('id', 'big-container')
page.insertAdjacentElement('afterbegin', container)
...