CSS使PERCECTIVE属性将DIV位置固定在DIV中 [英] CSS make DIV position fixed inside DIV with PERSPECTIVE propertie

问题描述

我在相对于＃获得 #fixed 与 position：fixed 有一个问题容器

i have a problem for getting #fixed with position:fixed relative to #container

检查此内容： https://jsfiddle.net/a1zoghs0/2/

我知道，如果我放 #fixed #container 之外的code>，

i know that, if i put #fixed outside of #container,

它将具有位置：固定。就像这样的小提琴： https://jsfiddle.net/xc879rbm/1/

it will had position:fixed. just like this fiddle : https://jsfiddle.net/xc879rbm/1/

但不幸的是，我有一个问题，该方法无法正常工作。是否可以将
放入 #container 并相对于<$ c仍启用 position：fixed $ c> #container ？

but unluckly, i have an issue where this method can't working. is it possible to put this inside #container and still enable position:fixed relative to #container?

我的代码有什么问题吗？

is there anything wrong with my code?

预先感谢...

推荐答案

因为您无法修复 里面的为什么透视图会更改CSS中的固定位置？，我建议您为您的javascript覆盖函数添加一个额外的包装器。

Since you can't have the fixed inside, Why does perspective changes fixed position in CSS?, I suggest you add an extra wrapper for your javascript overlay function.

因为您不能拥有固定内，为什么透视图固定不变放置在CSS中？，只需将它们放置在容器外部（如下面的示例所示），因为固定的div还是相对于窗口，因此我看不到添加第二个包装器的位置。

Since you can't have the fixed inside, Why does perspective changes fixed position in CSS?, just place them outside your container (as in below sample), as I can't see the point adding a second wrapper because the fixed div is relative to the window anyway.

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

.parallaxBase {
    width:100%; 
    position:absolute; top:200px; left:50%;
    transform:translateZ(0);
  	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>

这篇关于CSS使PERCECTIVE属性将DIV位置固定在DIV中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！