How to correctly position one element or block relative to another in BEM?

Question

css

I read an article about HTML wrappers on the BEM website and it says: To position one block relative to another or to position blocks inside another block, it is common in BEM to use mixes. If it is impossible to solve these problems using mixes, HTML wrappers are used.

I have questions:
1) Did I understand correctly that the article says about position: absolute and position: relative?
For example: there is a block in which there is a picture and a block with text, and this block with text is located in the middle of the picture.

<a class="collection__item" href="#">
              <img class="collection__img" src="images/content/collection-2.jpg" alt="">
              <div class="collection__info">
                <h6 class="collection__info-title">Truffaut literally trust</h6>
                <p class="collection__info-text">Living room furntiture | Chair</p>
              </div>
 </a>

And so that everything looks like in the screenshot, I have to add a mix to the collection__item and collection__info blocks and position it through this mix, or it’s enough to write it like this:

.collection__item {
  position: relative;
}

.collection__info {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

}

If so, where does the wrapper o_O come from?

2) My second understanding of what is written in the article means that if I use a block wrapper with a width limit, then it is correct to use it like this:

<section class="main wrapper">
  <div class="main__content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum cupiditate beatae ratione ducimus, aspernatur voluptate, possimus architecto, dolorum exercitationem, dolores repellendus corrupti maxime sequi accusamus incidunt minus dignissimos nisi. Incidunt.
  </div>
</section>

.wrapper {
  max-width: 1400px;
  width:  100%;
  padding:  30px 60px;
}

Not SO

<section class="main">
  <div class="wrapper">
    <div class="main__content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus enim rem numquam veniam nobis mollitia sequi! Commodi numquam vel distinctio magnam earum voluptatem dolore error aut autem consequatur non, harum.
    </div>
  </div>
</section>

Answer 1

1) Did I understand correctly that the article says about position: absolute and position: relative?

No. The wrapper (Wrapper) contains visual elements and allows them to be more conveniently positioned. position: absolute и position: relativeare a special case of using a wrapper, for example:

.some-wrapper {
  position: relative;
}

.some {
  position: absolute;
}

<div class="some-wrapper">
  <div class="some">content</div>
</div>