CSS化妝DIV位置內部DIV具有透視propertie

我有越來越#fixed與position:fixed相對於#containerCSS化妝DIV位置內部DIV具有透視propertie

檢查這個搗鼓出了一個難題：https://jsfiddle.net/a1zoghs0/2/

我知道，如果我把#container#fixed外，

它將有position:fixed。就像這個小提琴：https://jsfiddle.net/xc879rbm/1/

但不幸的是，我有一個問題，這種方法不能工作。是可能把這裏面#container，仍然啓用position:fixed相對於#container？

我的代碼有什麼問題嗎？

在此先感謝...

來源

2016-03-12 Ching Ching

在容器外面有什麼問題？ – LGSon

當我創建JavaScript覆蓋函數的位置：固定到中心，它不固定到＃容器。它會導致崩潰。這是醜陋的 –

~~既然你不能有 fixed裏面， Why does perspective changes fixed position in CSS?，我建議你爲你的javascript覆蓋函數添加一個額外的包裝。~~

既然你不能有fixed內，Why does perspective changes fixed position in CSS?，只要將它們放在你的容器外（如下樣品中），因爲我不能看到這一點加入第二包裝的，因爲固定格是相對於無論如何。

#container { 
 
\t width:100%; 
 
\t height:100%; 
 
\t perspective:300px; 
 
    \t perspective-origin:50% 50%; 
 
    overflow-y:scroll; 
 
} 
 

 
.parallaxBase { 
 
    width:100%; 
 
    position:absolute; top:200px; left:50%; 
 
    transform:translateZ(0); 
 
    \t transform:translateX(-50%); 
 

 
} 
 

 
.parallaxBack { 
 
    height:100vh; 
 
    transform:translateZ(-300px) scale(2); 
 

 
} 
 

 
#background {background:red; height:200px; padding-top:100px; } 
 
#content {background:yellow; } 
 
#fixed {background:green; 
 
    width:100%; height:40px; position:fixed; z-index:1; top: 0; left: 0; 
 
} 
 

 
#overlay { 
 
width:200px; height:200px; background:purple; 
 
position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); }

<div id="fixed">this is fixed // why not fixed?</div> 
 
<div id="container"> 
 
    <div class="parallaxBack"> 
 
    <div id="background"> this is parallax</div> 
 
    </div> 
 
    <div class="parallaxBase"> 
 
    <div id="content"> 
 
     this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content 
 
     this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="overlay"> 
 
    this is overlay 
 
</div>

來源

2016-03-12 14:17:29 LGSon

感謝LGSon回答我的問題。這是覆蓋問題：https://jsfiddle.net/a1zoghs0/3/它不是集中。 –

@ChingChing更新我的答案如何解決這個問題。您只需將覆蓋層放在容器外面，就像您使用固定格 – LGSon

一樣，謝謝LGSon真的很欣賞這一點。因此，在#container中放置#overlay無法解決此問題？ –

position:fixed是相對於窗口而不是父元素。如果要修復父元素中的元素，請使父元素position:relative和元素，您想要修復position:absolute;top:0px;。

來源

2016-03-12 13:59:38

https://jsfiddle.net/a1zoghs0/2/仍然無法正常工作。請幫助Sune先生 –

然後我不明白你想達到什麼目的。請嘗試重新描述它。這是什麼，你想#fixed做什麼？ –

我希望它的位置：固定滾動就像這個小提琴https://jsfiddle.net/xc879rbm/1/但#fixed必須在＃容器 –

的問題是，包裝（在div#container盒），其中你想有一個固定位置的元素圍繞着由下一個CSS屬性否決其效果：

perspective: 300px;

這是罪魁禍首。當你檢查它的文檔，它提到的下一行：

使用這個屬性比0值，沒有創建一個新的堆疊內容。 source: MDN - CSS perspective

使用position: fixed具有相同的行爲，這會導致衝突。

固定不要爲元素留出空間。而是將其放置在相對於屏幕視口的指定位置，並且在滾動時不要移動它。打印時，將其放在每頁上的固定位置。此值始終創建新的堆疊上下文。source: MDN - CSS position

當您刪除上述行時，您會看到該元素現在已被固定到視口。但這會破壞你的視差背景...

解決它的唯一解決方案是在其頂部添加另一個容器，併爲您的固定元素使用單獨的div。

<div id="wrapper"> 
    <div id="fixed">this is fixed // why not fixed?</div> 
    <div id="container"> 
     <div class="parallaxBack"> 
      .... 
     </div> 
    </div> 
</div>

並使用您div#fixed的position: fixed規則。

來源

2016-03-12 14:22:08 KarelG

謝謝卡勒爾G回答我的問題。我只知道這一點。這是我的覆蓋問題：https://jsfiddle.net/a1zoghs0/3/它不是集中。 –

@ChingChing：檢查[這個小提琴]（https://jsfiddle.net/a1zoghs0/5/）看看我在HTML中做出的修改（添加了一個包裝器）並修改了CSS中的兩行（他們'重新評論'// ...'）。這是你想要的嗎？ – KarelG

感謝KarelG，我明白這一點。我想#overlay position：固定就像#fixed。如果我滾動它。 #overlay繼續移動 –

這是我的解決方案。我並不完全確定其中的所有數學細節，但它對於調整窗口大小看起來相當健壯。

主要技巧是將標題放在很遠的地方，使其變得如此之大以至於視口的移動不會影響其位置 - 考慮大而遠的天空上的月亮，因此您的頭部的動作不會影響其位置。

body{ 
 
    margin:0; /* without it your container will not cover full body */ 
 
} 
 
#container { 
 
    width:100vw; /* probably 100% would be ok here */ 
 
    height:100vh; /* 100% would not be ok here, 
 
        as we need to center perspective viewport 
 
        w.r.t. screen- not w.r.t. whole long page content */ 
 
    /* this makes math easier to me */ 
 
    perspective:1px; 
 
    perspective-origin:0 0; 
 
    /* we want container to be a window through which you watch 
 
     the scrolling world */ 
 
    overflow-y:scroll; 
 
    /* we don't want scrollbar at the bottom, as it would again force 
 
     us to use calc for perspective-origin-y. 
 
     Frankly, I do not know why the scrollbar appears at all */ 
 
    overflow-x:hidden; 
 
    /* This is to allow positioning of layers relatively to container*/ 
 
    position:relative; 
 
} 
 

 
.parallaxBase { 
 
    width:100%; 
 
    position:absolute; 
 
    top:200px; 
 
} 
 

 
.parallaxBack { 
 
    height:100vh; 
 
    /* The general formula to keep size intact is scale(perspective-z) 
 
     so in our case it is scale(1+1) */ 
 
    transform:translateZ(-1px) scale(2); 
 
    transform-origin: 0 0; 
 
} 
 

 
#background {background:red; height:200px; padding-top:100px; } 
 
#content {background:yellow; } 
 
#fixed {background:green; 
 
    width:100%; 
 
    height:40px; 
 
    /* this is not so much to make it sticky, 
 
    it is rather to not push the parallaxBack div lower, 
 
    and to make sure that header is not occluded by elements 
 
    which have position:absolute like parallaxBase, 
 
    as even z-index:1 won't help you if you have position:static 
 
     */ 
 
    position:absolute; 
 
    top:0px; 
 
    z-index:1; 
 
    /* Now the main idea: 
 
    we push the navbar 1023px to the back, but at the same time, 
 
    we make it (1023+1) times bigger, which makes it appear in 
 
    original size.*/ 
 
    transform: scale(1024) translateZ(-1023px); 
 
    transform-origin: 0 0; 
 
}

<div id="container"> 
 
    <div id="fixed">this is fixed // why not fixed?</div> 
 
    <div class="parallaxBack"> 
 
    <div id="background"> this is parallax</div> 
 
    </div> 
 
    <div class="parallaxBase"> 
 
    <div id="content"> 
 
    this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content 
 
    this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content 
 
    </div> 
 
    </div> 
 
</div>

你可能想在 https://jsfiddle.net/7L8ndtuv/2/

發揮它我也建議你閱讀https://developers.google.com/web/updates/2017/03/custom-scrollbar這激發了我的答案。

來源

2017-06-10 00:13:56 qbolec

CSS化妝DIV位置內部DIV具有透視propertie

回答

相關問題