Home>

Image of completed image

Currently

I want to correct only the overlap of characters.
I feel like there is a problem with the position tag of css.

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "utf-8">
  Try<title>Dotinstall Pane</title>
  <link rel = "icon" href = "favicon.ico">
  <link rel = "stylesheet" type = "text/css" href = "css/styles.css">
</head>
<body>
  <div>
<img src = "img/bg.png" alt = "background image" width = "100%">
<h1>Dotinstall Pane</h1>
<p>
  <br>
  Atom package for coding
</p>
</div>
</body>
</html>
. topimage {
  position: relative;
}
.topimage h1, p {
  position: absolute;
  color: white;

  top: 0;
  left: 0;
  margin: 0;
}
img {
  width: 100%
}

I ’ll fix any questions that are missing.
Please give me an answer!

  • Answer # 1

    First, this code you would write
    Do you understand the meaning?

    . topimage h1, p {
      position: absolute;
      color: white;
      top: 0;
      left: 0;
      margin: 0;
    }

    This means that theh1tag in.topimageand allptags in the HTML file Isn't it setting style from{to}?

    Isposition: relativeset in.topimagethis time?
    So,.topimage h1, pis set totop: 0andleft: 0?

    That means that.topimage h1and.topimage pare relative to the upper left of the.topimagearea Placed in the upper left part

    Then,ptags other than.topimage pare placed in the upper left part when the upper left corner of the screen is used as the reference

    Isn't that going to be

    ? (You may want to see this lesson once)

    Now, I understand that both.topimage h1and.topimage pare placed at the top left. You can shift either element

    . topimage p {
        top: 100px;
    }

    However, in order to follow the completed image diagram, I think that the image material is not enough as it is, so please go ahead with the lesson

    Well, I think you should take a look at the CSS basic syntax introduction of dot installation once before that.

    p
    . topimage h1, p {
      position: absolute;
      color: white;
      top: 0;
      left: 0;
      margin: 0;
    }

    First,

    . topimage h1 {
      position: absolute;
      color: white;
      top: 0;
      left: 0;
      margin: 0;
    }
    .topimage p {
      position: absolute;
      color: white;
      top: 0;
      left: 0;
      margin: 0;
    }
    Let's separate it from

    . It is not very good to style different elements at the same time.
    Then

    top: 0;
      left: 0;
      margin: 0;
    Try changing the value of

    in various ways.