<div class="container">
  <div>
    <div class="sticky-element">
      I can’t stay fixed; I'm limited by the boundaries of my container!
    </div>
  </div>
  <p>Some other content here...</p>
</div>

<div class="container container-2">
  <div class="sticky-element">
    I can stick, my parent container is tall enough!
  </div>
  <p>Scroll down to see me stick!</p>
</div>

.sticky-element {
  position: sticky;
  top: 0;

  background-color: #ff8c00;
  padding: 10px;
  color: white;
}

.container {
  height: 300px;
  background-color: #f0f0f0;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

body {
  font-family: Arial, sans-serif;
  color: #333;
}

.container-2 {
  margin-bottom: 100vh;
}