How to recreate this image using CSS-Position

Admin 1
Viewed 43

I have to recreate the image in the end of this question using positioning. I am not allowed to edit the HTML in any way. I don't want to know the solution but rather what am I missing or overlooking. I'm positive this has to be done with position: absolute but I'm not sure how to target each box individually.

This is the code:

body {
    font-family: 'Mansalva', cursive;
    position: absolute;
}

div {
    border: 3px solid black;
    text-align: center;
    position: relative;
    height: 100px;
    width: 200px;
    background-color: blue;
}

p {
    border: 2px solid black;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom: 0px;
    background-color: black;
    color: white;
    font-size: 35px;
    height: 100px;
    width: 200px;
}
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div><p>Your Name</p></div>
</body>

Desired position of each element

position css
1 Answers

To do this only with css, you have to use selectors.

For example :

/* Selects the second <li> element in a list */
li:nth-child(2) {
    color: lime;
}

/* Selects every fourth element
among any group of siblings */
:nth-child(4n) {
    color: lime;
}

The documentation is very well done.

Without touching HTML and without adding JS, I think CSS selectors are mandatory.

Another link to help you

You can use CSS selectors to target a specific div and a CSS grid for positioning

user_120602410
Related