Question

我在fixed div中有一个按钮outer。问题是当我设置position: fixed时（为了在页面滚动时保持按钮停留），它无法正常工作。

按钮仍然滚动并移出屏幕。

这是我的代码

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

如何修复它以在滚动页面时始终在屏幕上显示按钮？

Answer 1

这是浏览器的错误或设计行为：基本上，＆＃34; position：fixed＆＃34;如果任何父元素具有＆＃34;转换＆＃34;固定元素将被修复。组。以下主题有一些参考：

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

至于解决方法，您可以使用a作为包装并将彩色和旋转嵌套在其中，然后用＆＃34; margin＆＃34;调整定位。它有点像hacky，但它可能会根据情况而有效。这是一个演示：

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

Answer 2

静态框内部有固定元素，这意味着您将红色链接固定到蓝色框，而不是外部。你需要做的是删除蓝框内的红色链接。

这应该是你想要的。

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>

滚动父div时，固定的位置不起作用

2 个答案: