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

回答

相关问题