html - Sticky element does not start at edge of screen

Question

My sticky element does not start at the edge of the screen and it is very annoying:

div.sticky {
    height: 50px;
    width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: black;
  padding: 50px;
  font-size: 20px;
  z-index: 500;
  html, body {
    overflow-x: visible;
  }
}

question from:https://stackoverflow.com/questions/65907801/sticky-element-does-not-start-at-edge-of-screen

Answer 1

Your issue is most likely coming from the margin that is applied to the body by default, just make sure to set it to 0.

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: visible;
  margin: 0;
  padding: 0;
  height: 1000px;
}

div.sticky {
  height: 50px;
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: black;
  padding: 50px;
  font-size: 20px;
  z-index: 500;
}

<div class="sticky"></div>