CSS: The use of the top element does not work for me-CodePudding

I want to position my element according to top and not according to margin-top but the default is top = 0 and I try to change and fail only using br

HTML:

<div >
  <h1 >
    <div>Hi,</div>
    <div>I'm Opal</div>
    <div>Welcome to my site.</div>
    <!-- <span >&lt;h1&gt;</span> -->
  </h1>
</div>

CSS:

.hover {
  color: #fff0;
  background: linear-gradient(90deg, gold 50%, #fff 0) var(--_p, 100%)/200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 3s;
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  line-height: 1.5;
  max-width: 23.2%;
  margin-left: 120px;
}


.h1 {
  top:100px
}

CodePudding user response：

You could simply do following:

.h1 {
     position: fixed; 
     width: 100%;
     margin-top:100px;
}

When using top, you have to specify the position.

CodePudding user response：

You should learn about CSS positioning to understand that because The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.

you can learn about that here

it's important to learn about CSS position because the element will behave differently in each position.

div.a {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid red;
}

div.b {
  position: absolute;
  top: 0;
  border: 3px solid blue;
} 

div.c {
  position: absolute;
  top: 50px;
  border: 3px solid green;
}

<p>red div element has position: relative;</p>

<div >
  <div >position: absolute, and top: 0.</div>  
  <div >position: absolute, and is placed 50 pixels from the top of its parent.</div>
</div>

CodePudding user response：

When you always want to change the placement of any element, you must first or change its position to either relative or absolate, then control the element by properties(top, bottom, left, right) look to this example

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div >
This div element has position: relative;
</div>

</body>
</html>

another example

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div >This div element has position: relative;
  <div >This div element has position: absolute;</div>
</div>

</body>
</html>