Computer scienceFrontendCSSBasic propertiesPositioning

z-index

Theory

Fix The Track

Report a typo

Thomas is 14 years old and he is learning new CSS properties. He decided to create a simple train track using HTML and CSS, but he doesn't know how to properly use the z-index property yet.
So he ended up positioning the sleepers on top of the steel rail, but we know it won't work.
Please help Thomas to correctly position the sleepers so that his train can move without any problems.

Don't worry if the result looks ugly in the Preview, in the Solutions it'll be fine.

Write HTML and CSS code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Train Track</title>
</head>
<body>
<div class="grass">
<div class="steel-rail-container">
<div class="steel-rail"></div>
<div class="steel-rail"></div>
</div>
<div class="sleeper-container">
<p class="sleeper"></p>
<p class="sleeper"></p>
<p class="sleeper"></p>
<p class="sleeper"></p>
<p class="sleeper"></p>
<p class="sleeper"></p>
<p class="sleeper"></p>
</div>
</div>
</body>
</html>
Completed 2 of 3
The elements with class sleeper has the right properties.
The code is valid.
___

Create a free account to access the full topic