Почему мой абсолютно позиционированный элемент не отображает заданный цвет фона? - PullRequest
Новая
       9

Почему мой абсолютно позиционированный элемент не отображает заданный цвет фона?

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

Я настраивал код от:

https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html

<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: green;
  }
  .a{
    position: relative;
  }
</style>
<div class="a">
  <div class="heart">Hello</div>
</div>

  1. Класс .heart имеет цвет фона green, но он не работает. Я проверил, используя inspect на веб-странице, и он определенно не был перезаписан каким-либо другим CSS стилем.

    Что здесь происходит? Используемый браузер: Google Chrome

  2. Кроме того, можете ли вы объяснить мне, как использовать: 

    top: 0px;
right: 0px;
bottom: 0px;
left: 0px;

в целом и как это работает.

Ответы [ 2 ]

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

Вы установили 

top: 0px;
right: 0px;
bottom: 0px;
left: 0px;

Таким образом, верхний край равен 0 пикселям от верхнего края содержащего блока, а нижний край равен 0 пикселям от нижнего края содержащего блока, и так on.

Это может быть весьма полезно, когда вы пытаетесь полностью покрыть элемент каким-либо другим содержимым ... но здесь это не так.

Содержащий блок является ближайшим предком, который это не position: static, в этом случае это будет <div class="a">.

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

Поскольку у него нет содержимого, он получает вычисленную высоту ноль .

Это означает, что элемент div (запомните, где его края выровнены) также имеет высоту ноль.

Это означает, что для цвета фона, к которому нужно применить цвет, нет пикселей (и текст по-прежнему отображается, поскольку по умолчанию имеет overflow: visible).

Трудно сказать какое правильное решение здесь, потому что неясно , почему вы используете абсолютное позиционирование в первую очередь.

Простое использование позиционирования решит его, так как будет делать все, что дает a некоторую высоту (например, устанавливать его свойство height или помещать некоторое другое содержимое (которое равно в нормальном потоке) внутри.

Учебное пособие, на которое вы ссылаетесь устанавливает top, bottom и height, которые действительно не имеют смысла. (то же самое для горизонтальных эквивалентов). Если цель состоит в том, чтобы нарисовать сердце, то с помощью инструмента лучше использовать для рисования, чем взломать CSS. 

p {
  font-size: 20px;
}

svg {
  vertical-align: middle;
  height: 20px;
}
<p>I <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" viewbox="0 0 645 585" id="svg2">
  <defs
     id="defs4" />
  <g
     id="layer1">
    <path
       d="M 297.29747,550.86823 C 283.52243,535.43191 249.1268,505.33855 220.86277,483.99412 C 137.11867,420.75228 125.72108,411.5999 91.719238,380.29088 C 29.03471,322.57071 2.413622,264.58086 2.5048478,185.95124 C 2.5493594,147.56739 5.1656152,132.77929 15.914734,110.15398 C 34.151433,71.768267 61.014996,43.244667 95.360052,25.799457 C 119.68545,13.443675 131.6827,7.9542046 172.30448,7.7296236 C 214.79777,7.4947896 223.74311,12.449347 248.73919,26.181459 C 279.1637,42.895777 310.47909,78.617167 316.95242,103.99205 L 320.95052,119.66445 L 330.81015,98.079942 C 386.52632,-23.892986 564.40851,-22.06811 626.31244,101.11153 C 645.95011,140.18758 648.10608,223.6247 630.69256,270.6244 C 607.97729,331.93377 565.31255,378.67493 466.68622,450.30098 C 402.0054,497.27462 328.80148,568.34684 323.70555,578.32901 C 317.79007,589.91654 323.42339,580.14491 297.29747,550.86823 z"
       id="path2417"
       style="fill:#ff0000" />
    <g
       transform="translate(129.28571,-64.285714)"
       id="g2221" />
  </g>
</svg> code
</p>

Приведенный выше SVG основан на этом публичном c доменном изображении .

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

Проблема здесь в том, что вы используете оба значения left, right и top, bottom в вашем CSS, и, как объяснено в ответе @Quentin, так как у родителя нет высоты и ширины, это всегда приведет к heart div, чтобы иметь 0px высоту и 0px ширину, следующий фрагмент кода решает эту проблему 

<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0px;
    background-color: green;
  }
  .a{
    position: relative;
  }
</style>
<div class="a">
<div class="heart">Hello</div>
</div>

другой способ решить: 

.heart {
  position: absolute;
  margin: auto;
  top: 0px;
  left: 0px;
  background-color: green;
}
.a{
  position: static;
}
<div class="a">
  <div class="heart">Hello</div>
</div>

И еще один способ здесь: 

.heart {
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: green;
  }
 
  .a{
    position:relative;
    width:40px;
    height: 15px;
  }
<div class="a">
<div class="heart">Hello</div>
</div>
...