Положение: фиксировано, если не указано левое/верхнее/правое/нижнее - желаемые результаты в FF/IE, но не в Safari

Извините, что вам нужно задать еще один вопрос, связанный с position:fixed, но чтение через другие вопросы и темы форума не помогло мне с этим.

Следующий код - это упрощенная демонстрация того, как я использовал position:fixed в проекте на сегодняшний день. Мое первоначальное (неправильное) понимание position:fixed заключается в том, что он первоначально исправляет относительно первого позиционированного родительского контейнера и после этого остается в этой позиции независимо от положения прокрутки в окне просмотра. Теперь я понимаю, что это неправильно: на самом деле, position:fixed позиции относительно внешнего контейнера (т.е. Тега html) и position:absolute расположены относительно первого родительского контейнера, который имеет позицию, отличную от static.

Прочитав другие вопросы о SO, я понимаю, что эффект, который я пытался достичь с помощью position:fixed, - это тот, который многие другие люди пытались сделать, но затем реализовать невозможно только с помощью CSS: То есть, чтобы позиционировать элемент относительно контейнера, но затем он останется там, где он находится относительно окна просмотра, когда страница прокручивается.

Что меня смущает, так это то, что выше было именно то, что я, казалось, достиг - по крайней мере, на FF и IE8. В приведенном ниже примере кода "фиксированное правое содержимое" сначала расположено справа от красного "центра прокручиваемого содержимого" и вертикально выравнивается с верхней частью содержимого центра. Содержимое центра можно прокручивать, но правый контент остается там, где он находится, как если бы он изначально позиционировался статически в обычном потоке документов, но после этого оставался фиксированным в окне просмотра.

Теперь я понимаю, что это похоже на "работу" в IE8 и FF просто потому, что я не указал атрибуты top/bottom/left/right для элемента fixed. Если я это сделаю, тогда я понимаю, что элемент fixed сразу же позиционируется относительно окна просмотра.

Я предположил - возможно, опасно - до сих пор, если относительные позиции не указаны, то position:fixed по умолчанию помещает этот элемент, где он обычно статически ставится. По крайней мере, FF и IE8, похоже, делают именно это.

Тестирование в Safari, однако, показывает, что Safari, кажется, помещает этот элемент fixed влево от своего контейнера. Другими словами, без позиционирования, мой элемент position:fixed не является ни тем, где он был бы статически, либо не был бы расположен на 0,0 относительно окна просмотра.

Я полагался на очень плохо определенное поведение на сегодняшний день, и я лучше всего прибегаю к решению JavaScript для достижения этого фиксированного позиционирования? Или это поведение хорошо определено для IE/FF; и может кто-нибудь объяснить логику размещения Safari, пожалуйста?

<style type="text/css">
  #content-centre {
    margin: 0 auto;
    width: 900px;
  }
  
  #header {
    height: 55px;
    position: fixed;
    top: 0;
    width: 990px;
  }
  
  #left-pane {
    position: fixed;
    top: 12px;
    border: 1px green solid;
  }
  
  #main-pane {
    left: 200px;
    position: relative;
    top: 66px;
    width: 760px;
    border: 1px yellow solid;
  }
  
  #container-1 {
    border-top: 1px solid #FFFFFF;
    float: right;
    min-width: 130px;
    padding-left: 20px;
    border: 1px blue solid;
  }
  
  #container-0 {
    margin-right: 20px;
    min-height: 470px;
    overflow: auto;
    padding: 10px 0;
    position: relative;
    border: 1px red solid;
  }
  
  .side-info-list-fixer {
    position: fixed;
  }
</style>

<div id="content-centre">

  <div id="header">
  </div>

  <div id="left-pane">
    Fixed left pane content
  </div>


  <div id="main-pane">
    <div id="page-module-containers">

      <div id="container-1">
        <div class="side-info-list-fixer"> Fixed right pane content </div>
      </div>

      <div id="container-0">
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
      </div>

    </div>
  </div>

</div>

ОТВЕТЫ

Ответ 1

Я считаю, что ответ, который вы ищете, выглядит следующим образом.

Позиция элемента по умолчанию не равна 0,0. Его позиция устанавливается по умолчанию относительно содержащего элемента, поэтому в вашем примере "# container-1" имеет padding-left: 20px, тогда как остальная часть дополнения устанавливается в 0, делая "по умолчанию" позицию элемента 20px слева от стены # контейнера-1, а верхняя часть - 0px сверху # контейнера-1.

По умолчанию по умолчанию этот элемент по умолчанию, а мой просмотр не прокручивается, будет 63 пикселя сверху, а слева, очевидно, зависит от ширины вашего браузера. Однако, если вы не переопределяете верхнюю и левую стороны, они уже определены движком рендеринга как верх: 63px, left: 893px.

Затем при изменении размера окна эта позиция настраивается так, чтобы отражать позицию на основе окна просмотра, так как вы прокручиваете вниз, положение изменяется, чтобы зафиксировать ее.

Итак, просто добавив "position: fixed;" ваши свойства (насколько это касается браузера) быть следующим:

position:fixed;
top:63px; // defined by default during browser rendering in some browsers (based on scroll position on load)
left:893px; // defined by default during browser rendering in some browsers (based on scroll position / width of browser at time of load)

Кроме того, IE6 и т.п. не поддерживают позицию: фиксируются вообще. http://fiddle.jshell.net/uaE4g/4/show/

Надеюсь, это поможет!

Ответ 2

Я вижу похожие результаты в сафари 5, а не в сафари 6.

в браузерах, похоже, работает следующим образом:

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

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

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

ваш "side-info-list-fixer" находится в "main-pane", который имеет позицию: relative. отмените это, и вы увидите то же поведение, что и в Safari 6 и большинстве других браузеров.

Я не знаю, что правильно и что вы должны зависеть от этих возможностей...

$2с, * -pike

Ответ 3

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

function SetFixedPositioning(element) {
    var currentOffset = $(element).offset();
    $(element).css("position", "fixed");
    $(element).offset(currentOffset);           
}

Используйте его следующим образом:

SetFixedPosition($("#element-to-position"));

Мой вариант использования - это меню навигации второго уровня, которое втекало в документ, а затем было зафиксировано в этой позиции.