Позиция "сверху / снизу" выводит изображение из div - PullRequest
Новая
       95

Позиция "сверху / снизу" выводит изображение из div

0 голосов
/ 29 мая 2020

Это может быть немного больше, но я нигде не могу получить ответ и начинаю злиться.

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

Однако, если я изменю или добавлю top или bottom процентные значения положения значения к моему изображению, каким-то образом изображение перемещается из родительского div (с position: relative), поэтому, если я изменю padding моего оборачивающего div (чтобы он мог покрыть большую область экрана), изображения будут не затронуты, они не перемещаются по изменениям заполнения div, как если бы они не были вложены в мой div.

Кто-нибудь знает, что именно происходит? 

<div class="top-container">
    <img class="top-cloud">
    <h1>I'm Marcos</h1>
    <h2>A Software Developer</h2>
    <img class="bot-cloud">
    <img class="mountain">
</div>

Это мой CSS

body {
    margin: 0;
    text-align: center;
}

h1 {
    margin-top: 0;
}

.top-container {
    background-color: #79bac1;
    position: relative;
    padding: 10% 0 0 0;
}

.top-cloud {
    position: absolute;
    width: 8%;
    left: 15%;
}

.mountain {
    width: 35%;
    display: block;
    margin: auto;
}

.bot-cloud {
    position: absolute;
    width: 8%;
    right: 15%;
    top: 10% /*If I delete this value, the image (.bot-cloud) moves in and it gets affected by the ".top-container" padding. But if I leave it, and modify the padding in the ".top-container", it gets moved out of the ".top-container" as if it's not wrapped by it.*/
}

1 Ответ

0 голосов
/ 29 мая 2020

Ваше изображение имеет position: absolute;, что исключает его из потока документов, т.е. оно не будет занимать места, которого не было бы, если бы вы просто стерли его - оно только покрывает пространство других элементов.

Его единственная ссылка в отношении позиции - это следующий наивысший родительский элемент, который имеет position: relative. Если top равно 0, его верх будет прямо на верхней границе родителя. padding родительского элемента не изменит этого вообще (см. Фрагмент ниже).

Если вы используете отрицательное значение top, оно будет (вертикально) перемещать за пределы родителя (= вверх), например top: -10% поместит его на 10% (от родительского height) выше (= снаружи) верхней границы родительского элемента. Положительное значение, например top: 10%, поместит его на 10% (от высоты родителя) ниже (= внутри) верхней границы родителя. Ссылка для top всегда является верхней границей родительского элемента. Тот же принцип для значений left, right и bottom - их ссылкой будут левая, правая и нижняя граница относительного родителя. 

body {
  margin: 0;
  text-align: center;
}

h1 {
  margin-top: 0;
}

.top-container {
  background-color: #79bac1;
  position: relative;
  padding: 10% 0 0 0;
}

.top-cloud {
  position: absolute;
  width: 8%;
  left: 15%;
}

.mountain {
  width: 35%;
  display: block;
  margin: auto;
}

.bot-cloud {
  position: absolute;
  width: 8%;
  right: 15%;
  top: 0%;/*If I delete this value, the image (.bot-cloud) moves in and it gets affected by the ".top-container" padding. But if I leave it, and modify the padding in the ".top-container", it gets moved out of the ".top-container" as if it's not wrapped by it.*/
}
<div class="top-container">
  <img class="top-cloud">
  <h1>I'm Marcos</h1>
  <h2>A Software Developer</h2>
  <img src="https://placehold.it/200x150/d66" class="bot-cloud" >
  <img src="https://placehold.it/150x100/6a9" class="mountain">
</div>
...