固定位置不動時滾動父div

我有一個按鈕fixed裏面的outer股利。問題是當我設置position: fixed（在頁面滾動時保持按鈕不動），它不能正常工作。固定位置不動時滾動父div

該按鈕仍然滾動並移出屏幕。

這裏是我的代碼

.rotate { 
 
    transform: rotate(30deg); 
 
    background: blue; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    background: red; 
 
    padding: 10px; 
 
    color: white; 
 
    top: 50px; 
 
}

<div class="rotate"> 
 
    <button class="fixed"> I am fixed inside a rotated div.</button> 
 
</div> 
 
<!-- <div class="fixed"> I am fixed outside a rotated div.</div> -->

我怎樣才能修復它保持的按鈕即可顯示在屏幕上滾動時的頁面？

來源

2017-10-11 DinhNgocHien

這是由於旋轉。您可以將旋轉應用於按鈕，而不是 –

@TemaniAfif我看到了，無論旋轉與否，它都可以修復嗎？ – DinhNgocHien

我不知道如何解釋這一點，但似乎旋轉打破了位置屬性。唯一的解決方案，我看到它使內部元素，而不是外部元素的變換......但也許更有經驗的人會給你一個更好的:) –

這可通過瀏覽器的童車或通過設計行爲：基本上和「位置是：固定」固定元件將不被任何如果父元素具有「變換」設定的固定。下面的線程上有一定的參考：

Positions fixed doesn't work when using -webkit-transform

至於解決方法，你可能使用作爲一個包裝和鳥巢將彩色裏面的旋轉，然後用「保證金」調整定位。這有點哈克，但它可能取決於情況。這裏有一個演示：

[http://codepen.io/jean-andreghetto/pen/OxEaVN?editors=1100][2]

來源

2017-10-11 17:24:38 jean377

您在靜態框中有固定的元素，這意味着您將紅色鏈接固定到藍色框，而不是在外面。你需要做的是刪除藍色框內的紅色鏈接。

這應該是你想要的。

https://codepen.io/dawsonhudson17/pen/jGKeRy

.rotate { 
    transform: rotate(30deg); 
    background: blue; 
    width: 300px; 
    height: 300px; 
    margin: 0 auto; 
} 
.fixed { 
    position: fixed; 
    background: red; 
    padding: 10px; 
    color: white; 
    top: 50px; 
    left: 50%; 
    z-index: 2; 
    transform: translate(-50%) rotate(30deg); 
    display: block; 
    } 

    <button class="fixed"> I am fixed inside a rotated div.</button> 

    <div class="rotate"> 
    </div>

來源

2017-10-11 17:20:22

固定位置不動時滾動父div

回答

相關問題