Position an object in the current flow, then keep it at a fixed screen position when scrolling

Issue

I'd like to have my div fixedOnScreen positioned inside the flow of the document, but it should stay fixed at the same screen position when scrolling. Meanwhile, the rest of the layout should not change at all.

<div>
...
   <div>
      <div class="fixedOnScreen">I'm always at the same screen position</div>
   </div>
</div>

CSS position: fixed does not do the trick, because it takes the element from the flow when layouting.

Solution

This is only a kind of half-answer to better understand your requirements. Is this the sort of thing you are trying to achieve?

I have wrapped .fixedOnScreen with a container that has an :after to hold it open and thus keep the layout as expected. .fixedOnScreen is then given position:fixed to break out of the flow.

.fixedOnScreenContainer {
    border:1px solid blue;
}
.fixedOnScreenContainer:after {
    content: "I'm always at the same screen position";
    opacity: 0;
}
.fixedOnScreen {
    background:red;
    position:fixed;
}

<div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac facilisis ipsum. Aliquam porttitor a ex sed porttitor. Donec tincidunt nulla tortor. Nullam ultrices at arcu eget porta. 
</p>
   <div class="fixedOnScreenContainer">
      <div class="fixedOnScreen">I'm always at the same screen position</div>
   </div>
<p>
Duis lobortis rutrum nibh, et luctus nulla porttitor at. Curabitur blandit nisl quis justo suscipit bibendum. Vestibulum vestibulum lacus quis consectetur auctor. Quisque iaculis bibendum interdum. Pellentesque vehicula, neque et gravida iaculis, sapien leo egestas velit, eget cursus ante velit eu turpis. Aenean vitae velit maximus, condimentum sem eget, tincidunt odio. Suspendisse non dui libero. Sed vel nulla tellus. Proin vestibulum interdum ante, a dignissim ex vehicula vitae. Aliquam laoreet nisl est. Phasellus ornare in diam sit amet imperdiet. Integer in posuere tortor. Aenean et justo elementum leo commodo tincidunt.
</p>
<p>
Aliquam erat volutpat. Proin fermentum eget ante et posuere. Donec neque enim, sodales imperdiet mi ac, interdum ullamcorper quam. Suspendisse aliquet odio aliquam, egestas enim eget, placerat neque. Morbi nibh diam, fringilla ac sollicitudin sit amet, fermentum a metus. Praesent a risus magna. Phasellus a sapien eu erat feugiat fermentum et quis lectus. Ut a ipsum faucibus, venenatis elit nec, scelerisque elit. Fusce pretium dictum lacinia. Sed cursus dapibus diam, sed hendrerit lectus ultrices non. Proin id urna ac odio scelerisque efficitur sed rhoncus augue. Etiam enim mi, rhoncus vitae lectus ut, sagittis sollicitudin leo. Fusce sit amet mi lacinia, malesuada nisi condimentum, faucibus tellus. Pellentesque vel dapibus libero. Aenean dapibus velit mi, id feugiat velit pharetra ut.
</p>
<p>
Fusce viverra nisl ut metus tincidunt cursus. Sed libero lectus, varius eget nibh nec, congue accumsan sem. Aliquam in arcu at dui dapibus egestas non sed tortor. Vivamus accumsan tempus nulla, ut sagittis diam. Morbi id sodales nisi. Cras ante turpis, ornare sed molestie nec, efficitur sit amet felis. Quisque id dolor et quam varius commodo sit amet et nunc. Phasellus interdum porta posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque ultricies augue ac lectus malesuada fermentum. Quisque scelerisque nulla quis nulla molestie, eget lacinia nulla blandit. Phasellus fermentum, sem eu fermentum mollis, metus neque posuere dui, nec elementum sapien nunc id metus. Duis enim nunc, maximus id laoreet ut, fringilla at massa. Sed vitae finibus magna, non pulvinar mauris. Donec iaculis, arcu at rhoncus dictum, mi ex dapibus turpis, sit amet fringilla velit risus et tortor.
</p>

</div>

Answered By - Moob