Фиксированая позиция блока css

Question

Подскажите пожалуйста, как сделать что бы блок global2 был зафиксирован и не сдвигался при изменении размеров блоков item.

$(".item").hover(
  function() {
    $(this).animate({
      width: "200",
      height: "200"
    }, 200, function() {});
  },
  function() {
    $(this).animate({
      width: "100",
      height: "100"
    }, 200, function() {});
  }
);

.global {
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
  background: gray;
  white-space: nowrap;
  margin-bottom: 20px;
}

.global2 {
  width: 100%;
  height: 100px;
  overflow: hidden;
  overflow-x: scroll;
  background: blue;
  white-space: nowrap;
  position: fixed;
}

.item {
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 20px;
  display: inline-block;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="global">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="global2">
</div>

Answer 1

Можно назначит position: absolute для блока global и сделать отступ от топа документа для элемента global2

$(".item").hover(
  function() {
    $(this).animate({
      width: "200",
      height: "200"
    }, 200, function() {});
  },
  function() {
    $(this).animate({
      width: "100",
      height: "100"
    }, 200, function() {});
  }
);

.global {
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
  background: gray;
  white-space: nowrap;
  margin-bottom: 20px;
  
  position: absolute; /*устанавливаем абсолютное позиционирование*/
  z-index: 1; /*ставим поверх других элементов*/
  top: 0; /*приклеиваем к топу*/
}

.global2 {  
  margin-top: 120px; /*делаем отступ от топа тела, чтобы элемент был виден*/
  width: 100%;
  height: 100px;
  overflow: hidden;
  overflow-x: scroll;
  background: blue;
  white-space: nowrap;
  position: fixed;
}

.item {
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 20px;
  display: inline-block;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="global">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="global2"></div>

Answer 2

Ну, что то вроде этого

$(".item").hover(
  function() {
    $(this).animate({
      width: "200",
      height: "200"
    }, 200, function() {});
  },
  function() {
    $(this).animate({
      width: "100",
      height: "100"
    }, 200, function() {});
  }
);

.global {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  overflow-x: hidden;
  white-space: nowrap;
  margin-bottom: 20px;
}

.global2 {      
  width: 100%;
  height: 100px;
  overflow: hidden;
  overflow-x: scroll;
  background: blue;
  white-space: nowrap;
  position: fixed;
  top: 100px;
  z-index: 1;
}

.item {
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 20px;
  display: inline-block;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="global">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="global2">
</div>

БЛОГ НА HUSL

Фиксированая позиция блока css

Ответы (2 шт):