| 形式 | mod(dividend, divisor) rem(dividend, divisor) |
|---|---|
| サポート | https://caniuse.com/mdn-css_types_mod https://caniuse.com/mdn-css_types_rem |
dividend を divisor で割った余りを返します。数値、長さ(pxなど)、時間(msなど)、周波数(Hzなど)、解像度(dpiなど)、角度(degなど)、パーセンテージ(%) を指定できます。
mod() も rem() も除算の余りを返しますが、dividend や divisor に負数を指定した時の動作が異なります。mod() の結果は必ず divisor と同じ符号になります。rem() の結果は必ず dividend と同じ符号になります。
z-index の値は赤い太字部分の値になります。
.box1 { z-index: mod(22, 3) } /* 22 = 3 * 7 + 1 */
.box2 { z-index: mod(22, -3) } /* 22 = -3 * -8 - 2 */
.box3 { z-index: mod(-22, 3) } /* -22 = 3 * -8 + 2 */
.box4 { z-index: mod(-22, -3) } /* -22 = -3 * 7 - 1 */
.box5 { z-index: rem(22, 3) } /* 22 = 3 * 7 + 1 */
.box6 { z-index: rem(22, -3) } /* 22 = -3 * -7 + 1 */
.box7 { z-index: rem(-22, 3) } /* -22 = 3 * -7 - 1 */
.box8 { z-index: rem(-22, -3) } /* -22 = -3 * 7 - 1 */