css - 使用变量和百分比值在页面上定位元素

Question

假设我有一个这样的元素。

$div1-height: height(icon);
.div1 {
  left: 0;
  top: 25%;
  height: $div1-height; 
}

然后我在某处有另一个 div，我想使用该位置在屏幕上以数学方式定位它。从概念上讲，我想这样做。

.div2 {
  top: 25% + $div1-height;
}

这样的事情可能吗？怎么办？

Answer 1

25% 是在运行时评估的，因此在页面呈现之前计算它是行不通的。你可以像这样使用 calc

top: calc(25% + #{$div1-height});

但它可能没有最好的浏览器支持。我会考虑重新设计您的其他一些 css，这样您就不必使用 calc。