Overlap

As per the new brand guidelines, we introduce two new classes called .overlap and .overlap-child and an entire set of supporting classes.

This class allows you to achieve the following overlap effect, making your website more aesthetically pleasing and attractive.

The example included here is a standard implementation of overlap, where an image is set to be the background and the text/heading as the overlapping element. In order to pass WCAG 2.1, we normally will add a background colour to the overlap-child, in order to enhance the colour contrast.

Quick access: positioning overlap child divs

Overview

This feature is easy to integrate and flexible to customise. Below is the code skeleton for the overlap classes.

Code skeleton


                    <div class="band-black-wrap">
                        <div class="overlap">
                            <div class="band-tint-wrap overlap-child">...</div>
                            //child div 1
                            <div class="band-white-wrap overlap-child">...</div>
                            //child div 2
                        </div>
                    </div>

Glossary

Name	Description
wrapper div	The parent container of overlap div. It is used to set the background colour, padding or other attributes for this group.
overlap div	The div with class `overlap`, can be used to set background images.
child div	The child div of `overlap`, the overlapping element.
web/desktop mode	webstyle for device screen larger than 991px.
responsive mode	webstyle for device screen smaller than or equal to 991px.
W	The width of the overlap div.
H	The height of the overlap div.
w1	The width of the first (left) child div.
h1	The height of the first (left) child div.
w2	The width of the second (right) child div.
h2	The height of the second (right) child div.

Customisation

C1: Number of child divs

At this moment we only support a maximum number of 2 divs. In theory, you can have more than 2 child divs, but multiple layers of overlap will make your website inaccessible and crowded. But in case you need to have more than 2 child divs, please raise a Service Desk ticket to get support.

C2: Positioning child divs

We provid 2 sets of positioning classes (absolute & relative) to space the overlapping element with class .overlap-child.
The classes are named using the format {side}-{size}, such as t-1 or b-30. Please access the full set of positioning classes from overlap positioning.

DO NOT use margin classes for positioning overlap-child divs.

Margin is not used for positioning overlap-child divs. It is used to give spacing in responsive mode. Use only margin-bottom and margin-top classes for the child div. See example in C5.

C3: Sizing child divs

For width and height, you can use the classes of sizing, such as .w80 or .w-md-80 for reponsive mode.

To make the overlap effect, you have two checks.

Rule 1: top + h1 + h2 + bottom > H

Rule 2: left + w1 + w2 + right > W

C4: Ordering child divs

By default, the first(left) child div is one layer beneath the second(right) child div. You can adjust the order of two child divs by using our z-index classes.

The .z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Class name	Code structure	Description
`zindex-0`	<div class="overlap-child zindex-0"></div>	z-index: 0;
`zindex-1`	<div class="overlap-child zindex-1"></div>	z-index: 1;
`zindex-2`	<div class="overlap-child zindex-2"></div>	z-index: 2;
`zindex-3`	<div class="overlap-child zindex-3"></div>	z-index: 3;
`zindex-4`	<div class="overlap-child zindex-4"></div>	z-index: 4;
`zindex-5`	<div class="overlap-child zindex-5"></div>	z-index: 5;

C5: Responsive mode

In responsive mode, the two child divs will be vertically aligned with 100% width. It is because if the content in child div is abundant, they can still be clearly shown in responsive mode.

under desktop mode

under tablet mode

Applying margin to `.overlap-child`

As covered in C2, the margin is not used to position the overlap-child divs on desktop mode, it is used to add spacing to overlap-child under responsive mode. See a side-by-side comparison below:

Left: no margin class added | Right: .mt-2 was added to the overlap-child div.

Cheatsheet

Element	Attributes	Reference	Notes
wrapper div	`padding`	spacing classes
child div	`width`, `height`	sizing classes	See C3
	`top`, `left`, `right`, `bottom`	positioning classes	See C2
	`margin-top, margin-bottom`	spacing classes	See C5, generate space between overlapping elements in responsive mode
	other margins except `margin-top` & `margin-bottom`		Cannot be set

Use cases

Code structure Output

Code structure	Output
Case 1: overlap image with text `<div class="band-black-wrap p-0"> <div class="overlap"> <img alt="placeholder" class="w100 ratio-16-9" src="https://imagedepot.anu.edu.au/webpublishing/Carousel-s1.jpg" /> <h3 class="bg-black p-2 b-1 overlap-child"> Lorem ipsum dolor sit amet </h3> </div> </div>`	Lorem ipsum dolor sit amet
Case 2: overlap image with dateblock `<div class="band-black-wrap p-0"> <div class="overlap"> <img alt="placeholder" class="w100 ratio-16-9" src="https://imagedepot.anu.edu.au/webpublishing/Carousel-s1.jpg" /> <div class="overlap-child bg-black p-2 dateblock b-0"> <div class="day">15</div> <div class="month">Jan</div> </div> </div> </div>`	15 Jan
Case 3: overlap as banner `<div class="band-black-wrap p-0"> <div class="overlap"> <img alt="Hero banner" class="w100 ratio-4-1" src="https://imagedepot.anu.edu.au/webpublishing/Overlap-banner.jpg" /> <div class="container"> <h1 class="bg-black p-2 overlap-child b-0">Lorem ipsum dolor</h1> </div> </div> </div>`	Lorem ipsum dolor

Case 1: overlap image with text


                <div class="band-black-wrap p-0">
                    <div class="overlap">
                        <img alt="placeholder" class="w100 ratio-16-9" src="https://imagedepot.anu.edu.au/webpublishing/Carousel-s1.jpg" />
                        <h3 class="bg-black p-2 b-1 overlap-child">
                            Lorem ipsum dolor sit amet
                        </h3>
                    </div>
                </div>

Lorem ipsum dolor sit amet

Case 2: overlap image with dateblock

<div class="band-black-wrap p-0">
                    <div class="overlap">
                        <img alt="placeholder" class="w100 ratio-16-9" src="https://imagedepot.anu.edu.au/webpublishing/Carousel-s1.jpg" />
                        <div class="overlap-child bg-black p-2 dateblock b-0">
                            <div class="day">15</div>
                            <div class="month">Jan</div>
                        </div>
                    </div>
                </div>

Jan

Case 3: overlap as banner

<div class="band-black-wrap p-0">
                    <div class="overlap">
                        <img alt="Hero banner" class="w100 ratio-4-1" src="https://imagedepot.anu.edu.au/webpublishing/Overlap-banner.jpg" />
                        <div class="container">
                            <h1 class="bg-black p-2 overlap-child b-0">Lorem ipsum dolor</h1>
                        </div>
                    </div>
                </div>

Lorem ipsum dolor

General
Customisation
Use cases
Accessibility

Overview

As per the new brand guidelines, we introduce two new classes called .overlap and .overlap-child and an entire set of locating support classes. These enable you to achieve the following overlap effect, making your website more modern and attractive.

This feature is easy to integrate and flexible to customize. Below is the code skeleton for the overlap classes.

Code skeleton

<div>   // wrapper div
        <div class="overlap">   // overlap div
            <div class="overlap-child">...</div>     //child div 1
            <div class="overlap-child">...</div>     //child div 2
        </div>
    </div>

Glossary

Name	Description
wrapper div	The parent div of overlap div. It is used to set background color, padding or other attributes for this group.
overlap div	The div with class `overlap`
child div	The direct child div under overlap div
web mode	webstyle for device screen larger than 991px
responsive mode	webstyle for device screen smaller than or equal to 991px
W	The width of overlap div
H	The height of overlap div
w1	The width of the first(left) child div
h1	The height of the first(left) child div
w2	The width of the second(right) child div
h2	The height of the second(right) child div

Customisation

C1: Number of child divs

In theory, you can have unlimited child divs, but the popular practice is two child divs.

C2: Positioning child divs

We provid a set of positioning classes to locate the elment with class .overlap-child.
The classes are named using the format {side}-{size}, such as t-1 or b-4.

Where side is one of:

t - for classes that set top
b - for classes that set bottom
l - for classes that set left
r - for classes that set right

Where size is one of:

0 - to eliminate t, b, l, r spacing by setting it to 0px
1 - to set t, b, l, r spacing to 10px
2 - to set t, b, l, r spacing to 20px
3 - to set t, b, l, r spacing to 30px
4 - to set t, b, l, r spacing to 40px

Examples

Code Effect

Code	Effect
Let the `.overlap-child` locate at the left 0px and bottom 10px of its parent `.overlap` container `<div class="band-black-wrap p-0"> <div class="overlap"> <img src="..."> <h3 class="overlap-child b-1 bg-black p-2">... </h3> </div> </div>`	Lorem ipsum dolor sit amet
Let the `.overlap-child` locate at the right 0px and top 10px of its parent `.overlap` container `<div class="band-black-wrap p-0"> <div class="overlap"> <img src="..."> <h3 class="overlap-child t-1 r-0 bg-black p-2">... </h3> </div> </div>`	Lorem ipsum dolor sit amet

Let the .overlap-child locate at the left 0px and bottom 10px of its parent .overlap container

<div class="band-black-wrap p-0">
            <div class="overlap">
                <img src="...">    
                <h3 class="overlap-child b-1 bg-black p-2">... </h3> 
            </div>
        </div>

Lorem ipsum dolor sit amet

Let the .overlap-child locate at the right 0px and top 10px of its parent .overlap container

<div class="band-black-wrap p-0">
            <div class="overlap">
                <img src="...">    
                <h3 class="overlap-child t-1 r-0 bg-black p-2">... </h3> 
            </div>
        </div>

Lorem ipsum dolor sit amet

marginis NOT used for positioning

Margin will NOT take effect on web mode. It is used to give spacing on responsive mode. And only margin-bottom for the first(left) child div and margin-top for the second(right) child div are supported.

C3: Sizing child divs

For width and height, you can use the classes of sizing, such as .w80 or .w-md-80 for reponsive mode.

To make the overlap effect, you have two checks.

Rule 1: top + h1 + h2 + bottom > H

Rule 2: left + w1 + w2 + right > W

Responsive mode padding

Both the overlap div and child divs have width: 100%. So, in responsive mode, there is no visual margin effect. If you have space around child div, you can achieve this by setting CSS attribute padding of wrapper div, rather than setting margin of child div. Since the margin has a few constraints, which are illustrated in Caution 2.

C4: Ordering child divs

By default, the first(left) child div is backward while the second(right) child div is forward. You can adjust the order of two child divs by CSS attribute z-index.

C5: Responsive mode

In responsive mode, the two child divs will be vertically aligned with 100% width. It is because if the content in child div is abundant, they can still be clearly shown in responsive mode.

under desktop mode

under tablet mode,

Cheatsheet

Element	Attribute	Classes	Customization
wrapper div	`padding`	spacing classes	See Caution 5
child div	`width`, `height`	sizing classes	See Caution 4
child div	`top`, `left`, `right`, `bottom`		position the div, use percentage
first(left) child div	`margin-bottom`	spacing classes	space in responsive mode
first(left) child div	other margins except margin-bottom		cannot be set
second(right) child div	`margin-top`	spacing classes	space in responsive mode
second(right) child div	other margins except margin-top		cannot be set

Class list

Class name	Code structure	Description	Customisation
`t-0`	<div class="overlap-child t-0"></div>	top: 0px;	C2: Positioning
`t-1`	<div class="overlap-child t-1"></div>	top: 10px;	C2: Positioning
`t-2`	<div class="overlap-child t-2"></div>	top: 20px;	C2: Positioning
`t-3`	<div class="overlap-child t-3"></div>	top: 30px;	C2: Positioning
`t-4`	<div class="overlap-child t-4"></div>	top: 40px;	C2: Positioning
`t-5`	<div class="overlap-child t-5"></div>	top: 50px;	C2: Positioning
`l-0`	<div class="overlap-child l-0"></div>	left: 0px;	C2: Positioning
`l-1`	<div class="overlap-child l-1"></div>	left: 10px;	C2: Positioning
`l-2`	<div class="overlap-child l-2"></div>	left: 20px;	C2: Positioning
`l-3`	<div class="overlap-child l-3"></div>	left: 30px;	C2: Positioning
`l-4`	<div class="overlap-child l-4"></div>	left: 40px;	C2: Positioning
`l-5`	<div class="overlap-child l-5"></div>	left: 50px;	C2: Positioning
`zindex-0`	<div class="overlap-child zindex-0"></div>	z-index: 0;	C4: Ordering
`zindex-1`	<div class="overlap-child zindex-1"></div>	z-index: 1;	C4: Ordering
`zindex-2`	<div class="overlap-child zindex-2"></div>	z-index: 2;	C4: Ordering
`zindex-3`	<div class="overlap-child zindex-3"></div>	z-index: 3;	C4: Ordering
`zindex-4`	<div class="overlap-child zindex-4"></div>	z-index: 4;	C4: Ordering
`zindex-5`	<div class="overlap-child zindex-5"></div>	z-index: 5;	C4: Ordering
`t-10`	<div class="overlap-child t-10"></div>	top: 10%;	C2: Positioning
`t-20`	<div class="overlap-child t-20"></div>	top: 20%;	C2: Positioning
`t-30`	<div class="overlap-child t-30"></div>	top: 30%;	C2: Positioning
`t-40`	<div class="overlap-child t-40"></div>	top: 40%;	C2: Positioning
`t-50`	<div class="overlap-child t-50"></div>	top: 50%;	C2: Positioning
`t-60`	<div class="overlap-child t-60"></div>	top: 60%;	C2: Positioning
`t-70`	<div class="overlap-child t-70"></div>	top: 70%;	C2: Positioning
`t-80`	<div class="overlap-child t-80"></div>	top: 80%;	C2: Positioning
`t-90`	<div class="overlap-child t-90"></div>	top: 90%;	C2: Positioning
`t-100`	<div class="overlap-child t-100"></div>	top: 100%;	C2: Positioning

Use cases

Code	Effect
Case 1: two elements overlap	Backward Panel White panel
Case 2: overlap image with text	Lorem ipsum dolor sit amet
Case 3: overlap image with dateblock `<div class="band-black-wrap p-0"> <div class="overlap"> <img alt="placeholder" class="w100 ratio-16-9" src="https://webstyle-dev.anu.edu.au/images/placeholders/placeholder-920-518.jpg" /> <div class="overlap-child bg-black p-2 dateblock b-0"> <div class="day">15</div> <div class="month">Jan</div> </div> </div> </div>`	15 Jan
Case 4: overlap as banner `<div class="band-black-wrap p-0"> <div class="overlap"> <img alt="Hero banner" class="w100 ratio-4-1" src="https://webstyle-dev.anu.edu.au/images/placeholders/placeholder-2000-500.jpg" /> <div class="container"> <h1 class="bg-black p-2 overlap-child b-0">Lorem ipsum dolor</h1> </div> </div> </div>`	Lorem ipsum dolor

Overlap

Lorem ipsum dolor sit amet

Overview

Code skeleton

Glossary

Customisation

C1: Number of child divs

C2: Positioning child divs

C3: Sizing child divs

C4: Ordering child divs

C5: Responsive mode

Applying margin to .overlap-child

Cheatsheet

Use cases

Lorem ipsum dolor sit amet

Lorem ipsum dolor

Overview

Code skeleton

Glossary

Customisation

C1: Number of child divs

C2: Positioning child divs

Examples

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

C3: Sizing child divs

C4: Ordering child divs

C5: Responsive mode

Cheatsheet

Class list

Use cases

Backward Panel

White panel

Lorem ipsum dolor sit amet

Lorem ipsum dolor

Accessibility

Applying margin to `.overlap-child`