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

标签 css sass

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

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

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

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

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

最佳答案

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

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

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

关于css - 使用变量和百分比值在页面上定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21684317/

相关文章:

javascript - 标题滚动过去后,修复页面顶部的菜单栏

css - 从混合中合并选择器

css 径向进度条增量为 1%

html - 在 iOS Safari 上可滚动的网页

css - 将 CSS 文件添加到 Angular 时出现 Mime 类型错误

css - 特定元素上的 Bootstrap Modal 背景 CSS

html - 如何为背景图像留出边距?

html - 如何让这个纯 CSS 图像比较 slider 从中间开始?

css - SASS - 用户代理样式表覆盖链接颜色

css - SCSS 问题,适用于 fiddle ,但不适用于本地