JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <h2>CSS Position</h2>
    <nav class="menu">
      <div>Home</div>
      <div>Kontakt</div>
      <div>Impressum</div>
    </nav>
    <div class="parent-container">
      <p class="text-par1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="https://placehold.it/300x250">
    </div>
    <p class="text-par3">Ich bin nur ein unbedeutender Text.</p>
    <p class="text-par2">Ich tanze aus der Reihe.</p>
    <p class="text-par3">Ich bin nur ein unbedeutender Text.</p>
  </main>

CSS

body, main{
  	display: block;
}


body{
  margin: 0 auto;
  width: 100%;
}

main{
  width: 100%;
  max-width: 1000px;
  height: 2000px;
  background-color: darkgray;
	margin: 0 auto;
  padding: 20px 0 20px 20px;
}

h2{
  font-size: 40px;
  text-align: center;
}

.menu{
  width: 240px;
  margin: 0 auto;
  height: 45px;
  padding: 10px;
  background-color: lightblue;
  z-index: 9;
}
.menu div{
  text-align: center;
  float: left;
  padding: 10px;
  border: 2px solid blue;
  background-color: white;
}

.menu:after{
  content: '';
  clear: both;
}

.parent-container{
    position: relative;
    top:10px;
    width: 98%;
}
.text-par1{
  position: static;
  padding-right: 350px;
}

.text-par2{
  position: fixed;
  width: 150px;
  bottom: 0;
  left: 0;
  padding: 20px;
  margin-left: 20px;
  border: 2px solid orange;
  background-color: white;
}

img{
  position: absolute;
  margin-right: 20px;
  height: 250px;
  top: 0;
  right: 0;
}
.text-par3{
  position: static;
  width: 150px;
  bottom: 0;
  padding: 20px;
  border: 2px solid orange;
  background-color: white;
}



  .menu {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }