为什么我的绝对定位元素不显示指定的背景颜色？

Question

我正在调整代码来自：

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>

.heartclass 有背景颜色green，但它不起作用。我在网页上使用 inspect 进行了检查，它绝对没有被任何其他 CSS 样式覆盖。

这里发生了什么？使用的浏览器：Google Chrome

还有，能不能解释一下：

有什么用

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

总而言之，它是如何工作的。

Answer 1

这里的问题是因为您在 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>

Answer 2

您已设置

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

因此上边缘距包含块的上边缘 0 像素，而下边缘距包含块的下边缘 0 像素，依此类推。

当您试图用其他内容完全覆盖一个元素时，这会非常有用……但这里不是这种情况。

包含块是最近的祖先，它是 而不是 position: static，在本例中是 <div class="a">.

现在，div没有正常流中的内容（它唯一的内容是绝对定位的心脏div，一个使它脱离正常流程的功能）。

由于它没有内容，它的计算高度为零。

这意味着心脏 div（记住它的边缘对齐的位置）也的高度为零。

这意味着没有应用背景颜色的像素（并且文本仍然被渲染，因为它默认有 overflow: visible）。

这里很难说什么是正确的解决方案，因为不清楚为什么您首先使用绝对定位地点。

只要不使用定位就可以解决这个问题，做任何给 a 一些高度（例如设置它的 height 属性或放置一些其他内容（是在正常流量)里面.

您 link 设置 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基于this public domain image.

为什么我的绝对定位元素不显示指定的背景颜色？

Why doesn't my absolutely-positioned element display the specified background-color?

html

css

css-position

background-color