CODEWITHSUNDEEP
htmlcss
karpfen
karpfen

Reputation: 499

How to force a <div> to stay a fixed distance from the top of the screen when scrolling?

I want to place a <div> element with some longer text in it on a webpage with a fixed top spacing of 30px. The problem is that whenever I'm scrolling down, the <div> doesn't stay in place and so the spacing disappears. I'm looking for a CSS-only solution.

This document illustrates my problem:

<!DOCTYPE html>
<html>
  <body>
    <div style = "width: 10px; top: 50px; margin-top: 50px; padding-top: 50px;
      position: absolute;">
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
    </div>
  </body>
</html>

Upvotes: 1

Views: 1375

Answers (4)

bruno
bruno

Reputation: 429

so you're saying that you want to keep 30 pixels spacing on the top of the div, but still want to be able to scroll down? In that case, i think you have to make the div itself scrollable. But since that's not what you want, how about overlaying another div with position:fixed and the same background color? 

  <body>
    <div class="overlay"></div>
    <div class="content">
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
    </div>
  </body>

body {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  padding-top: 50px;
  z-index: 1000;
  background: white;
  width: 300px;
}

.overlay {
  position: fixed;
  height: 50px;
  width: 100%;
  z-index: 2000;
  background: white;
}

Upvotes: 2

jimmyinthenetherlands
jimmyinthenetherlands

Reputation: 3

position: fixed; is the way to keep an element in place. Important is to use a width. More information here: https://css-tricks.com/almanac/properties/p/position/

Upvotes: 0

Brendan Farquharson
Brendan Farquharson

Reputation: 92

You don't need margin-top if you are absolutely positioning.

position: sticky with top: 50px; should achieve what you want

div {
  position: sticky;
  top: 50px;
}

Upvotes: 0

Aryan Twanju
Aryan Twanju

Reputation: 2516

Try this css rule for your fixed <div>.

.yourfixeddiv {
  position: fixed;
  top: 30px;
  width: 100%;
}

Upvotes: 1

Related Questions