3

I'm using slick slider https://kenwheeler.github.io/slick/.

I thought position:fixed meant that the element would be fixed relative to the viewport. However in the example below, when I scroll vertically and when I scroll through the slider, my "fixed" element moves relative to the viewport.

Why does this happen? Is there a way to keep the element fixed relative to the viewport whilst still retaining it within the slider div? 

jQuery(document).ready(function($) {
      $('.slider').slick({
        speed: 500,
        slidesToShow: 3
    });
});
html, body {
  background: #102131;
  color: white;
}

.container {
  padding-top:100px;
  position: relative;
  height: 4000px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fixed-object {
  position:fixed; 
  left:vw/2;
  top:0;
  width:400px; 
  height:50px; 
  background-color:grey; 
  z-index:1000
}


.slick-slider {
  background: #3a8999;
  font-size: 20px;
  text-align: center;
  width: 90%;
  height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="container">

  <div class="slider" data-slick="{'arrows': true}">
  
    <div style="border: 5px solid red;">Slide 1</div>
    <div style="border: 5px solid red;">Slide 2    
      <div class="fixed-object">Why am i moving?</div> 
    </div>
    <div style="border: 5px solid red;">Slide 3</div>
    <div style="border: 5px solid red;">Slide 4</div>
    <div style="border: 5px solid red;">Slide 5</div>
    
  </div>
 
</div>
olly
  • 323
  • 3
  • 10
  • 1
    The problem is because the slides get placed in an auto-generated `.slick-track` element which is `position: relative` and moves as you slide. The `.fixed-object` is fixed *to that parent element* so it moves with it. To make it static to the document you need to move it outside of the slick slider content. – Rory McCrossan May 13 '20 at 14:34
  • First of all, `left: vw/2` is not a valid value. – Robo Robok May 13 '20 at 14:34
  • @RoryMcCrossan `position: fixed` is not relative to the closest non-static element, unlike other position values. – Robo Robok May 13 '20 at 14:38
  • 1
    @RoryMcCrossan it's because there is the use of transform that create a containing block for fixed element – Temani Afif May 13 '20 at 14:44
  • @RoboRobok `left: vw/2` does what i expect when i take the fixed element outside of the slider div though. I expected it to center it in the middle of the page, and it did that. – olly May 13 '20 at 14:44
  • @TemaniAfif yes, you're right – Rory McCrossan May 13 '20 at 14:45
  • 1
    Since your slick slider is using transform you can do nothing, you have to make the fixed element outside of the transformed element. In other words, there should be no ancestor with transform (or other properties like listed in the second duplicate) – Temani Afif May 13 '20 at 14:47
  • Quote: "It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block.". – Robo Robok May 13 '20 at 14:47
  • 1
    @olly your `left` is ignored entirely, because it's invalid. It should be `calc(50vw / 2)` along with `tranform: translateX(-50%)` to center it. – Robo Robok May 13 '20 at 14:48
  • @RoboRobok ah, okay. haha thanks. must've been a coincidence that it did what i wanted then. And thanks for all the other answers. Makes sense to me why it's not fixed now. – olly May 13 '20 at 14:58
  • 1
    @olly yeah, it just took default X position without `left` :) – Robo Robok May 13 '20 at 15:07

0 Answers0