CSSのcalc 計算を行う際の単位はどのように指定すればよいでしょうか？

上手く定義ができず、また調べてみるのですが、計算自体はいくつもあるのですが、最終的な計算された数字の単位の定義が分からずアドバイスをお願いいたします。

例えば、％で位置を指定したいばあい、現在のピクセルの単位から計算を行って％になった値をセットするかと思います。
現在はあらかじめ計算した値をCSS側に●●％といった具合で記述していますが、calcを使えば計算しなくても良いかと思ったのですが、悩んでしまいました…。
80/1500*100＝5.333…%の場合、配置一の高さの場合

top:5.333%

と定義します。
この計算自体をセットしたいのですが、

top:calc(80px/1500px*100);

でセットするのですが、うまくいきません。
また、この場合計算された値は何になるのでしょうか？px？？
ちなみに今回は、出された数字を%として扱いたいのですが、こういった場合、どうやって計算された数字に％やpxなどの単位をセットしたらよいのでしょか？

宜しくお願いいたします。

No.1 ベストアンサー 回答者： hiroko24 回答日時： 2021/08/10 13:59

calc(80px / 1500px * 100%)

演算子の前後には必ず空白を挟む必要があります
%も省略しません

この回答へのお礼

有難うございます、記述の仕方に問題がありました。

お礼日時：2021/08/14 16:13

No.2 回答者： fujillin 回答日時： 2021/08/10 14:06

こんにちは

＞また、この場合計算された値は何になるのでしょうか？px？？
何らかの単位に統一していると思いますけれど、内部で計算しているのであまり気にする必要はないと思います。
利用者側からしてみれば、「単位系が同じ種類」のものであれば、calc()内で混在して使用することも可能です。

例えば、「右端（あるいは下端）から30px分戻ったところ」であれば、
　calc(100% - 30px)
などのような記述が可能です。
計算結果が％として解釈されているのか、pxで解釈されているのかは知りませんが、いずれにしろ絶対的には同じ寸法になります。

さて、ご提示の
＞80/1500*100
＞top:calc(80px/1500px*100);
個々の数値の意味はまったく分かりませんけれど、「100％の長さに対して、80/1500の長さを指定したい」ということなのではないでしょうか？
もしも、そうであるなら
　calc(100% * 80 / 1500)
などでいけるものと思います。
（式中のスペースは詰められませんのでご注意）
とは言っても、上記であればわざわざ計算などさせるまでもなく、設定時にあらかじめ計算して直接「5.33%」としておけば十分と思います。

これに対して、例示で挙げた
＞calc(100% - 30px)
のような場合を考えてみると、「30px」が固定値であるのに対して、「100%」は状況によって変わる数値であり、あらかじめ計算しておくことができないので、CSSで計算することに意味があると言えます。
（他の方法で、計算を必要としないような指定方法もあるとは思いますけれど・・・）

この回答へのお礼

有難うございます。
特に書く側は単位などは気にしなくても良いのですね。
私の記述方法にも問題がありました。
アドバイス有難うございました。

お礼日時：2021/08/14 16:14