CSS通过PERSPECTIVE属性使DIV位置固定在DIV中

Question

我遇到#fixed与position:fixed相对于#container

的问题

检查这个小提琴：https://jsfiddle.net/a1zoghs0/2/

我知道，如果我将#fixed放在#container之外，

它会有position:fixed。就像这个小提琴：https://jsfiddle.net/xc879rbm/1/

但不幸的是，我有一个问题，这个方法无法正常工作。是吗 可以将其放在#container内并仍然相对position:fixed启用#container吗？

我的代码有什么问题吗？

提前感谢...

Answer 1

由于你不能在fixed里面Why does perspective changes fixed position in CSS?，我建议你为你的javascript叠加功能添加额外的包装。

由于你不能在fixed内，Why does perspective changes fixed position in CSS?，只需将它们放在容器外面（如下面的示例所示），因为我看不到添加第二个包装的重点，因为无论如何，固定的div相对于窗口。

#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>

Answer 2

问题是你希望拥有固定位置的元素周围的包装器（<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="com.example.jbt.mymovie.Edit_MovieScreen"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:id="@+id/editScreenLinearLayout"> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:weightSum="100" android:id="@+id/linearLayout"> <TextView android:layout_width="0sp" android:layout_height="wrap_content" android:text="Movie Name" android:id="@+id/SubjectTV" android:textSize="24dp" android:layout_weight="50" /> <EditText android:layout_width="0sp" android:layout_height="wrap_content" android:id="@+id/movieNameImplement" android:layout_weight="50" android:text="@string/MovieNameEditText" /> </LinearLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="Summery :" android:id="@+id/SummeryTV" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/SummeryImplement" android:layout_weight="10064.12" android:text="@string/SummeryImplement" /> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:weightSum="100" android:id="@+id/linearLayout2"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="@string/URLtextView" android:id="@+id/URLtv" android:textSize="18dp" android:layout_weight="15" /> <EditText android:layout_width="0dp" android:layout_height="wrap_content" android:id="@+id/UrlImplement" android:layout_weight="60" android:text="@string/UrlImplement" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:text="@string/ShowButton" android:id="@+id/ShowB" android:onClick="showButton" android:layout_weight="20" /> </LinearLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="press show to get photo" android:id="@+id/ErrortextView" android:layout_gravity="center_horizontal" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageButton" android:src="@mipmap/ic_launcher" /> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:weightSum="100" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/OKbutton" android:id="@+id/OKbutton" android:layout_gravity="center|bottom" android:onClick="onClickaddMovie" android:layout_weight="50" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/CancelButton" android:onClick="cancelButton" android:id="@+id/CancelButton" android:layout_marginLeft="28dp" android:layout_marginStart="28dp" android:layout_gravity="center|bottom" android:layout_weight="50" /> </LinearLayout> </LinearLayout> </ScrollView> 框）否定了下一个css属性的效果：

div#container

这是罪魁祸首。当你检查它的文档时，它会提到下一行：

  

使用此属性的值不等于0且没有创建新的堆叠上下文。 source: MDN - CSS perspective

perspective: 300px; 的使用具有相同的行为，从而导致冲突。

  

已修复请勿为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它。打印时，将其放置在每页的固定位置。此值始终会创建新的堆叠上下文。 source: MDN - CSS position

当您删除上面的行时，您将看到该元素现在已固定到视口。但这会破坏你的视差背景......

解决它的唯一解决方案是在其顶部添加另一个容器，并为固定元素使用单独的div。

position: fixed

并在<div id="wrapper"> <div id="fixed">this is fixed // why not fixed?</div> <div id="container"> <div class="parallaxBack"> .... </div> </div> </div> 上使用position: fixed规则。

Answer 3

这是我的解决方案。我并不完全确定其中的所有数学细节，但它对于调整窗口大小看起来非常强大。

主要技巧是把标题放得太远，使它变得如此之大，以至于视口的移动不会影响它的位置 - 想想天空上的月亮，这是很大很远的，所以你的动作头部不影响它的位置。

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，这启发了我的答案。

Answer 4

position:fixed是相对于窗口而不是父元素。如果要修复父元素中的元素，请创建父元素position:relative和元素，您要修复position:absolute;top:0px;。