Позиция: абсолютная; оставленное свойство не работает правильно - PullRequest
Новая
       31

Позиция: абсолютная; оставленное свойство не работает правильно

0 голосов
/ 10 июля 2020

В следующем коде - https://codepen.io/tanmaylodha/pen/MWKXJWW CSS: Line-26; left:50% работает некорректно. Но если я установил display:inline-block в содержащем блоке .section-first a абсолютно позиционированного элемента .badge, тогда он будет работать нормально. 

    <section class="section section-first">
   <a href="#">
     <h1 class="badge">Recommended</h1>
     <h1 class="plus-plan">Our PLUS Plan</h1>
     <h2>The most popular choice of our customers.</h2>
     <p>
       Benefit from increased storage and faster support to ensure that
       your mission-critical data and applications are always available!
     </p>
   </a>
 </section>

.section {
  color: #6c6164;
  background-color: #f7fafd;
  padding: 1.563rem;
  margin-bottom: 1.563rem;
  border: 5px solid #fca156;
  margin-right: 12.5rem;
  box-shadow: inset 5px 5px 10px 2px #4fbf99;
}

.section-first {
  margin-top: 8rem;
}

.section-first a {
  position: relative;
}

.badge {
  font-family: "Red Hat Display";
  background-color: #60a7bd;
  padding: 0.625rem;
  border-radius: 5px;
  margin: 0%;
  position: absolute;
  left: 50%;
}

.section h1.badge {
  color: white;
}

.section-first .plus-plan {
  margin-top: 50px;
}

.section-highlighted {
  margin-left: 200px;
  margin-right: 0px;
  box-shadow: inset 5px 5px 10px 2px #4fbf99, 5px 5px 10px 2px #60a7bd;
  text-align: right;
}

.section:hover {
  border-color: #ff943c;
}

.section a {
  text-decoration: none;
}

Теперь проверьте этот код - https://codepen.io/tanmaylodha/pen/jOWKyZP Но здесь результаты разные. .child, будучи абсолютно позиционированным элементом, правильно позиционируется после 50% ширины содержащего его блока .parent

 <a href="" class="parent">
  I am a Parent
  <div class="child">
    I am a child
  </div>
</a>

.parent {
  position: relative;
  background-color: chocolate;
}
.child {
  position: absolute;
  background-color: darkgreen;
  left: 50%;
}

В обоих вышеуказанных Codepen содержащий блок (позиционируемый относительно) всегда является встроенным элементом , тогда почему результаты разные?

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Чтобы прояснить проблему, вот минимальный код, иллюстрирующий разницу: 

.parent {
  position: relative;
  background-color: chocolate;
}

.child {
  position: absolute;
  background-color: darkgreen;
  left: 50%;
}
<a href="" class="parent">
      I am a Parent
      <div class="child">
        I am a child
      </div>
    </a>
<br><br><br><br><br>
<a href="" class="parent">
  <div>I am a Parent</div>
  <div class="child">
    I am a child
  </div>
</a>

Обратите внимание, как в первом случае у вас есть текстовое содержимое внутри встроенного элемента, поэтому ширина вашего элемента используется в качестве ссылки для свойства left. Во втором случае у вас есть блочный элемент внутри встроенного элемента, и этот теперь имеет ширину, равную 0 (без окраски фона), и это то, с чем вы столкнулись в своем первом коде. left:X% из 0 равно 0, поэтому ничего не произойдет.

То, что вы делаете, конечно, верно, но наличие блочного элемента внутри встроенного элемента сделает рендеринг немного сложным. Из спецификации вы можете прочитать:

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

Да, непросто понять, но давайте возьмем наш пример и добавим еще CSS чтобы лучше видеть: 

.parent {
  position: relative;
  background-color: chocolate;
  border:2px solid red;
}
some text before<br>
<a href="" class="parent">
  <div>I am a Parent</div>
</a>
<br> some text after

Вы можете увидеть, как блочный элемент разбил наш встроенный элемент на два куска , которые пусты.

Чтобы избежать Имея дело с этим, избегайте наличия блочного элемента внутри встроенных элементов. Используйте inline-block, чтобы исправить эту проблему: 

.parent {
  position: relative;
  background-color: chocolate;
  border:2px solid red;
  display:inline-block;
}
some text before<br>
<a href="" class="parent">
  <div>I am a Parent</div>
</a>
<br>
some text after
0 голосов
/ 10 июля 2020

Используйте это ... 

.section-first {
  position: relative;
}

Вместо стиля ниже. 

.section-first a {
  position: relative;
}

Тег <div> является элементом уровня блока. Тег <a> - это встроенный элемент.

...