<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 3 - Absolute</title> <style> /* do not modify this rule */ h1 { text-align: center; } /* do not modify this rule */ div { width: 400px; height: 400px; } </style></head><body> <h1>Absolute</h1> <div class="container"> <div class="front"></div> <div class="middle"></div> <div class="back"></div> </div></body></html> Part 3- Absolute (absolute.html)In this section you will complete the stylesheet in absolute.html. You will need to addadditional style rules to complete this sections. You do not need to modify the HTML.CSS Requirements:• div.container should have a relative position type• use the margin trick to center div.container• div.front, div.middle, and div.back should have absolute position types• div.front, div.middle, div.back should have different background colors• div.front should not have any offsets!• Use top and left offsets on div.back and div.middle to recreate the spacing found in theimage belowModify the stacking context by using the z-index propertyo div.front should be on top of div.middle and div.backo div.back should be below div.middle and div.frontAbsolute

div { width: 400px; height: 400px; position: relative;…

Answered: Part 3 - Absolute Absolute

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

100%

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Part 3 - Absolute</title>
<style>
/* do not modify this rule */
h1 {
text-align: center;
}
/* do not modify this rule */
div {
width: 400px;
height: 400px;
}

</style>
</head>
<body>
<h1>Absolute</h1>
<div class="container">
<div class="front"></div>
<div class="middle"></div>
<div class="back"></div>
</div>
</body>
</html>

Part 3- Absolute (absolute.html)
In this section you will complete the stylesheet in absolute.html. You will need to add
additional style rules to complete this sections. You do not need to modify the HTML.
CSS Requirements:
• div.container should have a relative position type
• use the margin trick to center div.container
• div.front, div.middle, and div.back should have absolute position types
• div.front, div.middle, div.back should have different background colors
• div.front should not have any offsets!
• Use top and left offsets on div.back and div.middle to recreate the spacing found in the
image below
Modify the stacking context by using the z-index property
o div.front should be on top of div.middle and div.back
o div.back should be below div.middle and div.front
Absolute

Expert Solution

Step by step

Solved in 4 steps with 2 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions