JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span></span>
</div>
<div>
  <span></span>
</div>
<div>
  <span class="b"></span>
</div>
<div>
  <span></span>
</div> 

<p>
  Необходимо, чтобы span.b игнорировал  position:relative  родителя без удаления этого свойства, и имел свойства width: 100vw или 100%, и равнялся по левому краю body
</p>

CSS

div {
  width: 50px;
  height: 50px;
  margin: 50px;
  position:relative;
  background: red;
  float: left;
}

span {
  width: 70px;
  height: 50px;
  position: absolute;
  background: blue;
  bottom: -50px;
}

span.b {
  background: yellow;
  opacity: .7;
}

p {
  margin-top: 20px;
  float: left;
}

JavaScript

function fixB() {
  const margin = 20;
  $('.b').width($(window).width() - margin * 2).css('left', function() {
    return `-${$(this).parent().offset().left - margin}px`
  });
}

$(window).resize(fixB);

fixB();