Фиксированное положение относительно контейнера

Ответ положительный, если только вы не установите left: 0 или right: 0 после того, как задали положение div как fixed.

Обратите внимание на div с классом sidebar. Он зафиксирован, но привязан к родителю, а не к окну просмотра.

Вот пример CSS:

body {
  background: #ccc;
}

.wrapper {
  margin: 0 auto;
  height: 1400px;
  width: 650px;
  background: green;
}

.sidebar {
  background-color: #ddd;
  float: left;
  width: 300px;
  height: 100px;
  position: fixed;
}

.main {
  float: right;
  background-color: yellow;
  width: 300px;
  height: 1400px;
}

И HTML структура:

<div class="wrapper">wrapper
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
</div>

Таким образом, sidebar будет оставаться фиксированным относительно своего родительского элемента .wrapper, а не окна браузера, если вы не зададите координаты left или right.

Чтобы сделать элемент #content позиционированным относительно родительского элемента #parent, просто уберите стили top и left из фиксированного позиционирования. Таким образом, элемент будет находиться в том же месте, где размещён родительский элемент, и будет фиксирован в этом положении. Вот пример:

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

В результате элемент #content будет оставаться на месте, фиксируясь в области видимости, даже если вы прокрутите страницу. Это полезно, если вы хотите, чтобы контент оставался на экране в определённой позиции, но при этом выводился относительно родительского элемента.

Я создал этот плагин jQuery, чтобы решить похожую задачу. У меня был центрированный контейнер (табличные данные), и я хотел, чтобы заголовок фиксировался в верхней части страницы при прокрутке списка, но при этом оставался привязанным к табличным данным. Это означало, что заголовок должен оставаться там, где я разместил контейнер (по центру, слева или справа), и также перемещаться налево и направо при горизонтальной прокрутке.

Вот ссылка на этот плагин jQuery, который может помочь решить данную проблему:

ScrollToFixed

Описание этого плагина такое:

Этот плагин используется для фиксации элементов в верхней части страницы, если элемент выходит из видимости при вертикальной прокрутке. Однако он позволяет элементу продолжать движение влево или вправо при горизонтальной прокрутке.

С использованием опции marginTop элемент перестает двигаться вертикально вверх, как только вертикальная прокрутка достигает заданного положения; но элемент все еще будет двигаться горизонтально при прокрутке страницы влево или вправо. Когда страница прокручивается обратно вниз мимо заданной позиции, элемент восстанавливается на свое исходное место на странице.

Этот плагин был протестирован в браузерах Firefox 3/4, Google Chrome 10/11, Safari 5 и Internet Explorer 8/9.

Пример использования для вашего конкретного случая:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

Надеюсь, это поможет вам в реализации вашей задачи!

Вы можете решить проблему, изменив position: fixed; на position: sticky;.

Ваш код должен выглядеть так:

position: sticky;
top: 0;
right: 0;

Теперь другие div-элементы не будут находиться под этим элементом.

Предупреждение:

Этот ответ касается только заголовка: Фиксированное положение относительно контейнера. Для конкретного случая, о котором спрашивает пользователь, правильным решением будет использовать position: sticky.

Согласно документации MDN по CSS:

Элемент располагается относительно начального содержащего блока, установленного вьюпортом, за исключением случаев, когда один из его предков имеет свойства transform, perspective или filter, установленные на что-то отличное от none.

Вам просто нужно добавить свойство transform к контейнеру, и положение фиксированного элемента будет зависеть от него. Я думаю, что transform: translateX(0); будет достаточным.