Positioning link the same way where it sits bellow the above content

[asasass]

How do I position the exit link here: https://jsfiddle.net/pawhrq3j/

The same way it is done here? https://jsfiddle.net/7zuqo0L4/

[PaulOB]

If you want both centred together then you can do it like this.

Add flex-direction-column to the main wrapper.

.divdivContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;/* added*/
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
}

Then change the a element rule to look like this only:

a {
  position: relative;
  margin:10px auto 0;
  width: 37px;
  height: 37px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInExit 3s ease-in 0s forwards; 
  opacity: 0;
  pointer-events: none;
}

If you want the red circle offset from the centre then you can probably do that in the above a element by setting a negative margin as an offset.

e.g.

margin:10px auto -47px; /* changed from zero */

The above code needs no change to the html.

Or alternatively if you want to change html then with your original html code you would move the a link inside the wrapper above it and not outside and then you can absolutely position based on that element and not the viewport.

e.g.

<div class="divdivContainer">
  <div class="divContainer">
    <div class="div">text inside</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <div class="div">text inside here</div>
    <a href="" title="Exit" aria-label="Close"></a>
  </div>

</div>

Then add position:relative to .divContainer as a stacking context (your naming conventions are awful and confusing).

.divContainer {
  position:relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  max-width: 410px;
  gap: 10px;
  background: red;
}

Of course in the last example if you are going to hide the overflow (as needed for your curtain effect) then you will also cut off the red exit circle so you can’t use this method.