Part 4 - Positions
<!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 4 - Positions</title>
<style>
/* element selector */
replace-me {
font-size: 10px;
margin: 0;
background-color:#414046;
}
/* class selector */
.replace-me {
position: fixed;
left: 4em;
top: 0;
background-color: white;
width: 4em;
height: 100vh;
}
/* class selector */
.replace-me {
position: fixed;
right: 4em;
top: 0;
background-color: white;
width: 4em;
height: 100vh;
}
/* class selector */
.replace-me {
position: fixed;
right: 0;
top: 0;
background-color: green;
width: 4em;
height: 100vh;
}
/* class selector */
.replace-me {
position: fixed;
left: 0;
top: 0;
background-color: green;
width: 4em;
height: 100vh;
}
/* class selector */
.replace-me {
background: url('./images/white-car.png');
background-repeat: no-repeat;
background-size: cover;
transform: rotate(180deg);
position: sticky;
margin-top: 50em;
top: 0;
left: 20%;
width: 20em;
height: 40em;
float: left;
}
/* General sibling combinator */
.replace-me ~ .replace-me {
position: relative;
background: url('./images/red-car.png');
background-repeat: no-repeat;
background-size: cover;
margin-top: 5em;
top: 0;
right: 20%;
width: 20em;
height: 40em;
float: right;
}
/* General sibling combinator */
.replace-me ~ replace-me {
background-color: #EFB700;
border-radius: 2px;
margin: 4em auto;
width: 4em;
height: 10em;
}
</style>
</head>
<body>
<div class="left-grass"></div>
<div class="left-side"></div>
<div class="right-side"></div>
<div class="right-grass"></div>
<div class="car-left">
</div>
<div class="car-right">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div class="car-right">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div class="car-right">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
![**Part 4 – Positions (positions.html)**
At the end of this section, you will create a webpage that replicates the function and appearance of the webpage in the video shown below. In this example, the white and green lines are fixed, while the white car remains at the top of the viewport instead of disappearing upon scrolling.
![Diagram: A top view of cars on a road with dashed yellow lines in the center, a fixed white line on the left and green line on the far left side of the road. A white car remains at the top while red cars scroll downwards.]
To achieve the demonstrated effect, a combination of sticky, relative, and absolute positioning is utilized. Your task is to replace the default selectors in `sticky.html` with the correct selectors. You will need to investigate the HTML and predefined style rules to accomplish this.
**Hint:**
- Utilize the process of elimination:
- Example: The line on the left side is green.
- Look in the stylesheet for a rule that could create a green line on the left side.
- Examine the HTML to find if there is an element that matches the rule.
- Modify the rule's selector, then refresh your browser to confirm that the CSS rule applied is correct.](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F117b64c2-8536-4e17-ab28-e4c8e07cdfee%2F8a7e091e-96b8-4059-9ac0-26e1f4cb9962%2Fni81mgh_processed.png&w=3840&q=75)
Step by step
Solved in 3 steps with 1 images
