Css sticky position pushes every content down

Question

I am working on a website project involving a full screen Google Maps element on the index page. I am trying to add the logo on the right and make it sticky, so as users scroll down, it stays in place.

However, once I set the container of the logo element to sticky, and the logo inside to be displayed as block, altough it works, it created a white line on the top of the page too, pushing down the Google Maps element

Here's an image about the issue, with elements pushed down:

The HTML looks like this:

    <body style="position: relative;">
    <div class="titleText" style="position: relative;">
    <div id="smallh">Country,</div>
    <div class="title">XYZ</div>
    <div class="h">Soon</div>
    </div>
    <div class="sticky"><div style="border: 1px solid aquamarine"><img src="logo.png"></div></div>
    <div id="map"></div>
    

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap&region=hu">
        </script>
</html>
</body>

CSS looks like the following:

    div.sticky{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 5px;
        width: 60px;
        float: right;
        font-size: 20px;
        z-index: 999;
    }

img {
    width: 60px;
    height: 60px;
    display: block;
    
}

Obviously I'm missing something simple here

try removing `float:right;`, adding `right: 0;` to `div.sticky` and change `sticky` to `fixed`. — Getter Jetter, Aug 01 '20 at 09:09
@OlivierKrull And it works! Can you explain it in-depth, why fixed works? — nebulator0, Aug 01 '20 at 09:10
See [here](https://stackoverflow.com/questions/19501919/difference-between-positionsticky-and-positionfixed) — Getter Jetter, Aug 01 '20 at 09:11

Getter Jetter · Accepted Answer · 2020-08-01T09:53:07.340

0

div.sticky {
  position: -webkit-fixed;
  position: fixed;
  top: 0;
  right: 0;
  padding: 5px;
  width: 60px;
  font-size: 20px;
  z-index: 999;
}

edited Aug 01 '20 at 09:53

answered Aug 01 '20 at 09:12

Getter Jetter

2,033
1
16
37

score 0 · Answer 2 · answered Nov 30 '21 at 12:04

I'm having similar issue. Sticky shouldn't be considered "sticky" on screen like fixed, that's the thing.

Olivier's reference is correct - latest browsers handle it as relative block first (it does push the following contents), then fixed top and only once the end of the container has been reached, it switches to absolute bottom (in a sense).

Sadly this for me means I probably will need to use JQuery instead for I need a absolute/fixed/absolute combo.

Css sticky position pushes every content down

2 Answers2