CSS Positioning with nested fixed property

CSS Positioning with nested fixed property

<br>

.a{
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  background:yellow;
  z-index:1000000

}

.b{
  position:fixed;
  color:green;
  background:pink;
  left:60px;

}

.c{
  position:relative;

}

.d{
  position:static;

}
<div class="a">

  <div class="b">
  c is overlapping d is not
  </div>
  <span class="c">
overlaping sibling
  </span>
  <span class="d">
  i    am    not a overlapping     sibling
</span>
</div>


Click here for JSFiddle In the above fiddle i have an html please go through it an explain me why<span class="c"> is overlapping on the <div class = "b"> and why <span class="d"> is not overlapping on the <div class = "b"> what is difference between these two spans why is behaving differently?

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

HTML 5 Tutorial: How to create a table using HTML tags and Stylesheet (CSS)

In this article, we want to show you how to create a table using HTML tags and Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.