为什么CSS颜色不会被覆盖？

Question

我正在从以下位置调整此代码：

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

CODE：

<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. class heart具有指定为green的背景色，但是它不起作用。我已经使用网页上的inspect检查过，并且绝对不会被任何其他CSS样式覆盖。

这里发生了什么？使用的浏览器：谷歌浏览器

2. 另外，你能给我解释一下什么用：

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

总共以及它是如何工作的。

谢谢！

这是我的第一篇文章，如果我未能正确解释问题，请原谅我。

Answer 1

您只需要一些宽度和高度，或使用填充...。试试这个：

<style>
.heart {
    margin: auto;
    background-color: green;
    width: 200px;
    height: 200px;
    color: white;
    font-size: 20px;
}
</style>

Answer 2

我认为您想要的是：

<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>

这里的问题是因为您在CSS中同时使用了left，right和top，bottom的值。

Answer 3

这些是背景色的位置，您应该尝试更改这些值并测试结果。

top: 10;
right: 10;
bottom: 20;
left: 30;