Learn Intermediate CSS by Building a Cat Painting - Step 11

HTML-CSS
1

Tell us what’s happening:
Hello, I want to ask about position absolute and relative. I have tried to change the position on line 10 to be absolute, but I found that the box was shifting a little bit top and left eventhough the properties for the top and left are still the same at the relative position. Can somebody please tell me why was that?
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head"></div>
    </main>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

.cat-head {

/* User Editable Region */

  position: relative;
  top: 100px;
  left: 100px;

/* User Editable Region */

  background: linear-gradient(#5e5e5e 85%, #45454f 100%);
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Learn Intermediate CSS by Building a Cat Painting - Step 11

Link to the challenge:

2

You have to change your position property’s value to absolute.

3

Yes I know, and I did. I just put relative position back for asking why the box shifted a little to the top and left when I set it to be absolute while the left and top properties are still the same as when it’s set to be relative. I have stated it on my question before. Can you please answer the main question?

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.