使用CSS变量进行位置偏移

Question

我读过关于声明颜色的原生CSS变量，但我想知道是否有办法为top：left位置创建变量？我有一个覆盖图像文本框的CSS模板，设计师定期更改布局页面。我想完成这样的事情：

:root { 
    --topOffset: 10px; 
    -- leftOffset: 20px; 
} 

.text_Date_Overlay { 
position: absolute; 
top: 516px + topOffset; 
left:570px + leftOffset; 
font-family:Verdana; 
font-size:18px; 
font-style:italic; 

}

有没有办法，其它谢进入的JavaScript？

谢谢

Answer 1

您可以将它们与calc()合并，并做这样的事情。

:root { 
    --topOffset: 10px; 
    --leftOffset: 20px; 
} 

.text_Date_Overlay { 
    position: absolute; 
    top: calc(516px + var(--topOffset)); 
    left: calc(570px + var(--leftOffset)); 
    font-family:Verdana; 
    font-size:18px; 
    font-style:italic; 
} 

View Example Fiddle