This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 6201

6.13 Z Index

Alter the Z Index of objects to help deal with objects that are out of normal z-index flow.

classcss propertyvalue
.z_0 z-index : -1
.z_1 z-index : 1
.z_2 z-index : 100
.z_3 z-index : 1000
.z_4 z-index : 5000
.z_5 z-index : 9999

Example s

Default styling

z-index of 1000
[modifier class]

.z_0

z-index: -1

z-index of 1000
z_0

.z_1

z-index: 1

z-index of 1000
z_1

.z_3

z-index: 1000

z-index of 1000
z_3

.z_5

z-index: 9999

z-index of 1000
z_5
<div class="bg_alert-3 block br_solid br_transparent relative text_center" style=" height: 15rem; width: 100%;">
	<div class="absolute bg_black-5 c_white inline-block l_0 m_4 t_1 text_center w_70 z_3" style=" height: 13rem;">z-index of 1000</div>
	<div class="absolute bg_primary c_white inline-block m_5 r_0 t_1 text_center w_70 [modifier class]" style=" height: 11rem;">[modifier class]</div>
</div>
Copy Code