1.7 KiB
1.7 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d78a3367417b2b2512acf | Change the Position of Overlapping Elements with the z-index Property | 0 | https://scrimba.com/c/cM94aHk |
Description
z-index
property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the z-index
property of an element move it higher in the stack than those with lower values.
Instructions
z-index
property to the element with the class name of first
(the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle).
Tests
tests:
- text: The element with class <code>first</code> should have a <code>z-index</code> value of 2.
testString: assert($('.first').css('z-index') == '2', 'The element with class <code>first</code> should have a <code>z-index</code> value of 2.');
Challenge Seed
<style>
div {
width: 60%;
height: 200px;
margin-top: 20px;
}
.first {
background-color: red;
position: absolute;
}
.second {
background-color: blue;
position: absolute;
left: 40px;
top: 50px;
z-index: 1;
}
</style>
<div class="first"></div>
<div class="second"></div>
Solution
// solution required