На статический HTML-элемент не влияют позиционированные элементы? - PullRequest
Новая
       10

На статический HTML-элемент не влияют позиционированные элементы?

0 голосов
/ 03 октября 2018

Представьте, что у нас есть блог с заголовком и датой над текстом: 

<div class="blogHead">
  <h1>My blog title</h1>
  <p class="blogDate">The date</p>
</div>

<p class="blogText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Мы также хотим, чтобы дата находилась справа от заголовка.Одним из способов является позиционирование его родителя (.blogHead) как относительного, а затем использование абсолютного позиционирования на дату: 

.blogHead {
    position: relative;
}

.blogDate {
    position: absolute;
    top: 0px;
    right: 0px;
}

Это работает.Но если я также сделаю свойство position элемента h1 абсолютным, тогда текст переместится в верхнюю часть браузера и столкнется с элементом .blogHead. 

h1 {
    position: absolute;
    top: 0px;
    left: 0px;
}

Что влияет на положение h1, которое влияетсвязь между его родителем и последующим непозиционированным элементом p?

PS: кто-нибудь может предложить лучший заголовок?Кажется, трудно решить эту проблему.

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Абсолютно позиционированные элементы позиционируются относительно ближайшего предка с position:relative, если такого предка нет, тогда используется тело.

Ваша настоящая проблема возникает из-за того, что blogHead div разрушаетсяпоскольку абсолютно позиционированный контент удаляется из обычного потока.

Мы можем увидеть это, добавив границу к blogHead. 

.blogHead {
    position: relative;
    border: 1px solid red;
}

.blogDate {
    position: absolute;
    top: 0px;
    right: 0px;
}

h1 {
    position: absolute;
    top: 0px;
    left: 0px;
}
<div class="blogHead">
  <h1>My blog title</h1>
  <p class="blogDate">The date</p>
</div>

<p class="blogText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

У вас есть несколько вариантов здесь flexbox - это современный подход.В качестве альтернативы вы можете посмотреть на значения типа float, display: inline-block или вручную, получив .blogHead hieght.

Я предоставлю вам решение flexbox. 

.blogHead {
  /*Set the container to flex box*/
  display: flex;
  position: relative;
  border: 1px solid red;
  padding: 12px;
}

.blogHead>* {
  /*Set flex elements to fill the space equally*/
  flex-grow: 1;
}

.blogDate {
  text-align: right;
}

h1 {
  text-align: left;
}
<div class="blogHead">
  <h1>My blog title</h1>
  <p class="blogDate">3 Oct 2018</p>
</div>

<p class="blogText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Вот несколько быстрых и грязных примеров других упомянутых мною подходов:

0 голосов
/ 03 октября 2018

Абсолютная позиция является абсолютной для окна браузера, поэтому 0,0 - верхний левый угол браузера.Поместите их оба в div контейнера и сделайте абсолютную позицию на контейнере.

Как только вы сделаете что-то абсолютным, это больше не будет в потоке документа и, следовательно, не повлияет на поток других элементов.больше нажимать на другие элементы.

...