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

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>

1. .heart 类的背景颜色为绿色，但它不起作用。我已经在网页上使用inspect检查过了，它绝对没有被任何其他CSS样式覆盖。

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

2. 另外，你能解释一下有什么用吗:

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

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

Answer 1

你已设置

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

因此，顶部边缘距离包含 block 的顶部边缘 0 个像素，而底部边缘距离包含 block 的底部边缘 0 个像素，依此类推。

当您尝试用其他内容完全覆盖某个元素时，这可能非常有用......但这里的情况并非如此。

包含 block 是最近的祖先，不是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基于this public domain image .