We have learned how to position elements outside of the usual web page behaviors. Before you take your quiz, practice with the position and z-index properties using the code prompts below.
Make the second div display 200 pixels down from its actual location.
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<div>
</div>
<div
style="
position
:
relative
;
top
:
200
px
"
<div>
</div>
<div
style="
top
:
200
px
;
position
:
relative
"
Set this div to display 20 pixels down the web page, and 40 pixels over from the left.
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<div
style="
position
:
absolute
;
top
:
20
px
;
left
:
40
px
"
<div
style="
position
:
absolute
;
left
:
40
px
;
top
:
20
px
"
<div
style="
top
:
20
px
;
position
:
absolute
;
left
:
40
px
"
<div
style="
top
:
20
px
;
left
:
40
px
;
position
:
absolute
"
<div
style="
left
:
40
px
;
top
:
20
px
;
position
:
absolute
"
<div
style="
left
:
40
px
;
position
:
absolute
;
top
:
20
px
"
Relative to the outer div, set it so the inner div is 20 pixels from the bottom and 30 pixels from the right.
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<div
style="
position
:
relative
<div
style="
position
:
absolute
;
bottom
:
20
px
;
right
:
30
px
"
<div
style="
position
:
relative
<div
style="
position
:
absolute
;
right
:
30
px
;
bottom
:
20
px
"
<div
style="
position
:
relative
<div
style="
bottom
:
20
px
;
position
:
absolute
;
right
:
30
px
"
<div
style="
position
:
relative
<div
style="
bottom
:
20
px
;
right
:
30
px
;
position
:
absolute
"
<div
style="
position
:
relative
<div
style="
right
:
30
px
;
bottom
:
20
px
;
position
:
absolute
"
<div
style="
position
:
relative
<div
style="
right
:
30
px
;
position
:
absolute
;
bottom
:
20
px
"
Make it so this div rests at 10 pixels from the top and 10 pixels from the left of the browser's viewport.
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<div
style="
position
:
fixed
;
top
:
10
px
;
left
:
10
px
"
<div
style="
position
:
fixed
;
left
:
10
px
;
top
:
10
px
"
<div
style="
top
:
10
px
;
position
:
fixed
;
left
:
10
px
"
<div
style="
top
:
10
px
;
left
:
10
px
;
position
:
fixed
"
<div
style="
left
:
10
px
;
top
:
10
px
;
position
:
fixed
"
<div
style="
left
:
10
px
;
position
:
fixed
;
top
:
10
px
"
Without changing their location in the code, set it so the first div appears in front of the second one.
(Use the values 100 and 200)
(Use the values 100 and 200)
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<div
style="
z-index
:
200
"
<div
style="
z-index
:
100
"
