Исправлен div внутри относительного родителя, не работает в Safari

Question

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

Общим примером этого варианта использования является липкая веб-панель сайта в двух столбце.

Как я понимаю. Установка top: 0 на мой фиксированный div установит его на верх. Установка margin-left: 0 на моем фиксированном div выравнивает его с относительно позиционированным родителем.

Это нормально работает во всех браузерах, кроме Safari (версия < 10). Есть ли способ исправить эту проблему, которая не связана с обнюхиванием пользовательского агента.

Вот голая минимум скрипка, иллюстрирующая изолирующий вопрос ниже: http://jsfiddle.net/vgc1ekbg/4/

Вот еще скрипка, иллюстрирующая проблему в контексте два столбцов сайта макета: http://jsfiddle.net/dpmj3y0n/1/

Answer 1

Отредактированные на основе последней скрипки разделяемой в комментариях.

* { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    max-width: 960px; 
 
    height: 2000px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    /* line-height: 580px; */ 
 
} 
 
.layout { 
 
    height: 2000px; 
 
    /*padding-left: 20px;*/ 
 
    /* padding-right: 350px; */ 
 
    /*margin-right: 192px;*/ 
 
} 
 
.layout:before, .layout:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.layout:after { 
 
    clear: both; 
 
} 
 
.col-main { 
 
    width: calc(100% - 184px); 
 
    margin-left: -8px; 
 
    margin-top: -8px; 
 
    height: 580px; 
 
    float: left; 
 
    position: relative; 
 
    left: 200px; 
 
    background-color: #f16529; 
 
    line-height: 580px; 
 
} 
 
.col-sub { 
 
    /* margin-right: -100%; */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    line-height: 580px; 
 
    /* height: 580px; */ 
 
    background-color: #f0dddd; 
 
    float: left; 
 
} 
 

 
.sticky { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    z-index: 100; 
 
    background-color: gray; 
 
    color: red; 
 
    line-height: 100px; 
 
}

<div class="wrapper"> 
 
    <div class="layout"> 
 
    <div class="col-main">Main Content</div> 
 
    <div class="col-sub">Sidebar Content 
 
     <div class="sticky"> 
 
      Sticky Content 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

, если намерение выравнивания по центру, вы можете использовать left: 50%; и transform: translateX(-50%); как к .column и .sticky

http://jsfiddle.net/vgc1ekbg/5/