Help wanted for Position skill test 1 Extra Question

MDN Learn
1

I finished both assessments, but couldn’t do the extra challenge of the first question.

Here is my answer for the first question without the extra part:

.container {
position: relative;

}
.target {
position: absolute;
top: 0;
right: 0;
}

Link to Assessment Page: Test your skills: position - Learn web development | MDN (mozilla.org)

I could have done it manually by calculating the total height of the body and then giving the grey box the same value in the top property but that felt cheap and probably isn’t the right way to go about this.

2

Heres my latest solution to the problem, is there any way to do this without removing the padding on body

Solution:
body {
position: relative;
padding: 0.5em 0.5em 0 0.5em;
}

.target {
position: absolute;
top: 100%;
padding: none;
}

3

Hello @Assad_Newar

for the main question you doing great well done

for the extra one it ask you to can you change the target to display underneath the text?
so it ask you to make the target be on the same position but the text that it hide from the container to show up in front in other words to show the text from the container to be on top of the target

if you still do not know which property you need let me know and i will point you for it

hope that help and have a nice day :slight_smile:

1 Like
4

Well if its asking for the text from container class to be shown above the grey box, the solution is much simpler.

Just need to add this bit to target class:

z-index: -1;
1 Like
5

well done @Assad_Newar :wink:

1 Like