'CSS postion question from a newbie out of curiousity

just started learning how to create websites seriously for a few weeks. I am taking a online course right now too. And, I was wondering about the markup & styling below. (Below markup&styling is a example.) (This example code is based on the course content.)

.wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
  /* background-color: black; */
}

.section {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  /* background-color: aqua; */
}
<section class="section-1">
  <div class="section-wrapper section-1-wrapper">
    <div class="section-1-heading-wrapper">
      <h1 class="section-1-heading-i">
        Example Text
      </h1>
    </div>
  </div>
</section>

I was wondering why do someone need this styling? Seemed like a duplicate styling to my eyes, so I thought that I could use some help with this :) If anyone got the time, pray tell.

htmlcss


Solution 1:[1]

Position statements are very useful for styling web pages. There are a few types of this: positon: relative, position: fixed, position: sticky and position: absolute. We can use z-index property of css ONLY with the elements which styled with position statement. So keep going. It is very important property.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Asilbek Topilov

Related Questions