Computer Science 318

Fundamentals of Web Design

Lab 08 Positioning





Position property sets how an element is positioned in a document. Using the top, right, bottom, and left properties with position will determine the final location of positioned elements.

Values for position


top & bottom

Specifies the vertical position of a positioned element.

left & right

Specifies the horizontal positioning of a positioned element.

All four CSS properties will have no effect on non-positioned elements.

Values for top, right, bottom, and left:

Hint: When using the value 0 for any of the properties above a unit is not needed, the value is simply 0.


The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. An elements default z-index is 0. To move it up or down use positive or negative integers.


Experiment Try scrolling in the preview window below. Notice how the fixed element remains in place. Now try adding bottom and left CSS properties to get the fixed element in the bottom left corner.


<h3>Fixed</h3> <p>Et malesuada fames ac turpis egestas maecenas pharetra. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Sit amet mauris commodo quis imperdiet massa. Eget dolor morbi non arcu risus quis varius. Risus feugiat in ante metus dictum at tempor commodo. Turpis in eu mi bibendum neque. Nunc lobortis mattis aliquam faucibus purus in massa. Nisl rhoncus mattis rhoncus urna. Non enim praesent elementum facilisis leo vel fringilla est ullamcorper. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus.</p> <p>Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Ut enim blandit volutpat maecenas. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Commodo elit at imperdiet dui accumsan. Rhoncus dolor purus non enim praesent elementum. Tempus iaculis urna id volutpat. Pharetra magna ac placerat vestibulum lectus. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Vitae elementum curabitur vitae nunc sed. Pharetra et ultrices neque ornare aenean euismod elementum. Eget felis eget nunc lobortis mattis. Dui faucibus in ornare quam viverra orci. Quis lectus nulla at volutpat diam ut venenatis. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Pharetra pharetra massa massa ultricies mi quis. Maecenas sed enim ut sem viverra aliquet eget. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Eget est lorem ipsum dolor sit.</p>


h3{ background-color:yellow; position:fixed; }


Experiment Try using position absolute, top, and right on the exit class to move the x to the top right corner of the white box. Remember when using position absolute you need to add position relative to the container you want its location to be based on.


<div> <span class="exit">x</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Ornare arcu dui vivamus arcu felis bibendum ut. Orci dapibus ultrices in iaculis nunc. Vitae turpis massa sed elementum. Vel pretium lectus quam id leo. Pulvinar pellentesque habitant morbi tristique. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae nunc sed velit dignissim sodales ut eu. Mauris ultrices eros in cursus turpis. Eros donec ac odio tempor orci. Fames ac turpis egestas integer eget aliquet nibh. Sit amet tellus cras adipiscing enim eu turpis.</p> </div>


body{ background-color:darkgrey; padding:2rem; } div{ background-color:white; padding:1rem; } .exit{ background-color:red; color:white; padding:.5rem; }


Experiment Try changing the z-index on the move-me class to 3, 5, -3, -5 to see how it stacks above or below the other objects.


<h2 class="neg-four">Z-index -4</h2> <h2 class="neg-two">Z-index -2</h2> <h2 class="move-me">Move Me</h2> <h2 class="two">Z-index 2</h2> <h2 class="four">Z-index 4</h2>


.move-me{ background-color:purple; z-index:0; padding:8rem 2rem; top:0; } h2{ padding:2rem; position:fixed; } .two{ background-color:yellow; z-index:2; top:4rem; left:3rem; } .four{ background-color:pink; top:0; left:2rem; z-index:4; } .neg-two{ background-color:blue; top:8rem; left:6rem; z-index:-2; } .neg-four{ background-color:green; top:12rem; left:8rem; z-index:-4; }


Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab8

Create a new file called index.html in the lab8 folder

Setup your HTML files

Create your stylesheet

Link your stylesheet to the HTML

Change Document in the <title> element to "Animals"

Create an images folder

Save the following images in your images folder


Add a header and main in the body

Add a nav with three a in the header

In each a add the following content and href values

After the nav add a h1 with the content "Animals"

Lab 8 header html

In the main add four sections

Section 1

Add a class="animals" to the section

Add a h2 with the content "Animals"

Section 2

Add a class="sloth" to section

Add an id="sloth" to section

Add a h2 with the content "Sloth"

Add an article element

In the article add:
h2 "Choloepus"
h3 "Scientific Classification"

two paragraphs

Section 3

Add a class="elephant" to the section

Add an id="elephant" to the section

Add a h2 with the content "Elephant"

Add an article element

In the article add:
h2 "Loxodonta"
h3 "Scientific Classification"

four paragraphs

Section 4

Add a class="owl" to the section

Add an id="owl" to the section

Add a h2 with the content "Owl"

Add an article element

In the article add:
h2 "Tytonidae"
h3 "Scientific Classification"

three paragraphs

Lab 8 html finished


Make your browser window narrow about 500 or less pixels.


Background color #27213C

margin 0

font color #fff

font family 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

Lab 8 body css


background color rgba (39, 33, 60, .70)

display flex

flex-direction column-reverse

Use align-items to position the h1 and nav as seen below.
Possible values: flex-start, flex-end, center, stretch, baseline

Lab 8 header display flex


font color #e2512d

text decoration none

padding 1rem 2rem

font weight 900

display inline-block


font color #A33B20

text decoration underline

Lab 8 navigation styles

Back to the HTML

Add the following code right after the opening <body>

<iframe width="560" height="315" src=";autoplay=1&amp;fs=0&amp;loop=1&amp;modestbranding=1&amp;mute=1&amp;playlist=UuWr5TCbumI" allowfullscreen class="animal-background"></iframe>

The iframe above has some customization added to the video to:

Back to CSS


position fixed.
This will fixed the header in one spot within the web page.

top 0.
This will make the headers fixed position at the top of the web page.

width 100%
This will make the header take up 100% of the width of the web page. When using position fixed if you want something to take up the entire width you need to use width:100%.

Right now if you hover over the links in the nav you will not be able to click on them. The main is transparent and covering the header. Push the header in front of the main by changing the z-index of the header. By default all elements have a z-index of 0. If you want to move them forward use positive numbers starting at 1, and if you want to move it back use negative numbers starting at -1.

Lab 8 fixed header


position fixed

top -12rem

width 200%

left -51%

height 50rem;

z-index -1

background image animal.jpg.
We are adding this so when the video is loading there is something else to fill the space.

background size cover


text-align center

padding 13rem 0

text-shadow 2px 2px 2px #27213C

background-size cover

margin 0


background color #A33B20


background color transparent

Lab 8 parallax video


background-image sloth.jpg


background-image elephant.jpg


background-image owl.jpg

Lab 8 section images


padding 1rem

Lab 8 article styles mobile

In the HTML document for sections 2-4 add <span>^</span> in the <h2> after the content; Sloth, Elephant, Owl.

section span

position absolute

top 15rem

font-size 2rem

left 48%


position relative.
Remember when using position absolute you need to add position relative to which ever parent element you want the absolute element's position to be based on.

Lab 8 h2 caret position

Create a new file called scripts.js

Paste the follow javascript in to the new file and save

//Sloth Section
document.addEventListener("DOMContentLoaded", function(){
	document.querySelector('.sloth>.accordion').addEventListener('click', function(){
		document.querySelector('.sloth span').classList.toggle('rotate');
//Elephant Section
document.addEventListener("DOMContentLoaded", function(){
	document.querySelector('.elephant>.accordion').addEventListener('click', function(){
		document.querySelector('.elephant span').classList.toggle('rotate');
//Owl Section
document.addEventListener("DOMContentLoaded", function(){
	document.querySelector('.owl>.accordion').addEventListener('click', function(){
		document.querySelector('.owl span').classList.toggle('rotate');

We will be using the script above to create an accordion, where the user will click on the caret below the h2 and the article will appear below it. Also we will be rotating the caret to indicate whether the article is open or not.

Javascript function breakdown (looking at just the sloth section function):

In the head element add

<script src="scripts.js"></script>

On the first h2 in the three sections with articles add a class="accordion"


cursor: pointer;
Hint: This will make the user's cursor into the hand pointing. It is useful to indicate to the user you can click on this element.


display none.
We don't want the article to appear at load.

display block.
When the function is fired and the class of show is added by the javascript to an article element, we now want it to appear with display block.

section span

transform: rotate(180deg);.
This property will rotate the caret 180 degrees initially, pointing it down. Don't worry about learning the property yet, we will explore it further in a different lab.


When the rotate class is added by the javascript the caret will rotate to point up.

Lab 8 javascript

In the HTML after the iframe add a <a> with the following


background-color #27213C

font color #fff

padding 1rem 2rem

text decoration none

Lab 8 sidelink styles.
Right now it is positioned beneath the header but we want to move it to the right side of the screen. So we are going to use position fixed to do this.


position fixed

transform: rotate(90deg);

z-index 1

Use top and right properties to position the link similar to the image below.
Hint: I used a combination of rem and % to accomplish this.

Lab 8 sidelink positioned

Looking at the page, the images seem to run together. So let's add a border to the bottom of the images to separate them out.


border-bottom 2rem solid #e2512d

Lab 8 mobile css

Desktop CSS

Add @media (min-width:1000px){}

All CSS from here on will go inside the curly brackets of the media query


height 100rem

top -25%


padding 23rem 0

font-size 3rem

background-position center

Lab 8 h2 desktop css

section span

font-size 4rem

top 26rem

left 48%

Lab 8 caret desktop css


position absolute.
Hint: Because the header is already position fixed we do not need to add position relative.

Use top and left to position the nav like the image below

Lab 8 header desktop css


max-width 60rem

margin 0 auto.
Hint: Remember with width and max-width you can use auto as a value for the left and right on margin to center the element.

Lab 8 final css

Final Steps

Validate your HTML.

Lint your CSS at

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab8 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab8

Are you someone who needs to double check that it worked? If you want to make sure the push was successful click on the "View on GitHub" button from GitHub Desktop. It will open up your repository in the browser. From there you should be able to see all of your files.

...What if I need to make a change after pushing?

So let's say you have already pushed but noticed an error. No worries, this is easy to fix.

In visual studio code make any changes you need to. Once you are done making corrections. Save.

Go back to GitHub Desktop. You should see your changes to the documents listed there.

GitHub fixing an error.

Fill out the Summary field again. I suggest saying what you fixed. For example: "Fixed paragraph error on Sea-Jellies"

Click "Commit to main"

Click "Push Origin" and you are done.