相對父母內的固定div在Safari中的預期效果不佳

我在相對定位的div內有一個固定的div。我希望div被固定到頁面的頂部，並且包含在我的相對定位的父級中。相對父母內的固定div在Safari中的預期效果不佳

此用例的一個常見示例是雙列布局中的粘性網站側欄。

據我所知。在我的固定div上設置top: 0會將其固定在頂部。在我的固定div上設置margin-left: 0將使其與其相對位置的父對齊。

這適用於除Safari之外的所有瀏覽器（版本< 10）。有沒有什麼辦法可以解決這個不涉及用戶代理嗅探的問題。

這是說明如下隔離問題裸最小的小提琴： http://jsfiddle.net/vgc1ekbg/4/

這裏說明一個兩欄的網站佈局的背景下，問題的另一個小提琴：http://jsfiddle.net/dpmj3y0n/1/

來源

2016-12-01 Max Hartshorn

沒有.... *固定*定位的元素始終相對於**視口**定位。不是他們的父母元素。 –

編輯基於共享的末小提琴在評論中。

* { 
 
    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>

來源

2016-12-01 18:13:53 Syden

謝謝。但是在這種情況下，.sticky不再粘貼到視口的頂部。 –

我編輯它保留你的固定位置，如果你想讓它觸摸視口，你可以將top更改爲0，但它不會與正確的div對齊。 – Syden

用頂部留下示例：0;因爲這是你的原始價值，希望它有幫助。 – Syden

如果您有意居中對齊，可以使用left: 50%;和transform: translateX(-50%);既.column和.sticky

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

來源

2016-12-01 18:21:02

謝謝！不過，我並不是想要讓側邊欄居中。這裏面臨的挑戰之一在於，在兩列布局中，與視口左端或右端的距離可以很大。我已經添加了另一個小提琴，在雙列布局的背景下說明了這個問題 –

相對父母內的固定div在Safari中的預期效果不佳

回答

相關問題