宽度百分比值未应用于元素

Question

我在 HTML 中使用 Sass 设置元素的样式，当使用百分比设置元素的宽度时，它没有被应用。

这可能是因为我使用“content-max”设置了父元素的宽度和高度吗？

这是我正在使用的代码的基本版本，其想法是让父级的大小受到图像大小的限制（有效），并且文本覆盖是宽度的一半和整个高度容器元素（因此我分别使用 50% 和 100%）。

<div class="container">
      <img src="image.png" alt="A square image">
      <div class="text-overlay">
                
      </div>
</div>

单独编译的Sass如下：

.container {
        
     display: block;
     position: relative;
     width: max-content;
     height: max-content;
        
     img {
          display: block;
          position: absolute;
          z-index: 0;
     }
        
     .text-overlay {
        
           display: flex;
           position: absolute;
           width: 50%;
           height: 100%;
           z-index: 1;
     }
}

HTML 和 SCSS 都写在不同的文件中，并在必要时正确编译。

Answer 1

如 cmets 中所述，您可以不直接在 HTML 标记中编写 Sass。必须先编译。

在您的示例中，您使用的是嵌套，这不是有效的 CSS3 代码，因此要解决此问题，您必须编写像下面的 sn-p 这样的纯 CSS 或在应用之前编译您的 Sass将其添加到您的 HTML 中。

---

关于您的实际问题，当您将 width 和 height 硬核到 .container 元素时，您尝试归档的定位正在发挥作用。

---

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.container img {
  position: absolute;
  z-index: 0;
}

.container .text-overlay {
  position: absolute;
  z-index: 1;
  width: 50%;
  height: 100%;
  background-color: green;
  color: red;
  opacity: 50%;
}

<div class="container">
  <img src="https://i.picsum.photos/id/793/200/200.jpg?hmac=3DeE830wjdSShKq_h_iFtV_jAxf43FO4xx-sivW0Q_Y">
  <div class="text-overlay">
    Overlay
  </div>
</div>