所以我正在做一个网站。在其中，我使用了carousel，但在其中一个中，按钮没有呈现在正确的位置。我想在carousel的底部渲染它们：
.footer-carousel .flickity-prev-next-button.next{
transform: scale(1.35);
top: 85% !important;
}在桌面版本和我的手机上一切正常。
然而，我的按钮在其他一些设备上呈现在carousel的顶部，比如iPhone：
在上面的图片中，你可以看到我的类和属性是活动的，但是按钮呈现在carousel的顶部。
点击按钮后，按钮按下，但图像没有变化。之后，一切正常工作。
如果我尝试禁用此属性：
top: 85% !important;我的扣子一直扣下去
正如你所看到的，属性被禁用了，我的按钮被按下了，但是当我再次激活它时，它会出现在它应该被渲染的地方：
有人能帮帮忙吗
2条答案
按热度按时间brjng4g31#
我认为问题是. flickity-prev-next-button.next需要有css支持位置：absolute;和父组件。footer-carousel需要有prop位置：只是出于惯例，如果某个属性更接近底部，我喜欢使用bottom prob而不是top属性。
91zkwejq2#
这很奇怪，对我来说似乎是一个渲染错误。尝试旋转设备，看看是否会触发调整大小事件，该事件也可能纠正呈现问题。如果是这样的话，这只是确认它可能是一个渲染错误。
在过去，为了解决奇怪的渲染错误（如果这是什么的话），我做了一些工作，就是添加
transform: translateZ(0)，它在视觉上没有任何作用，但在后台它迫使浏览器将其放入一个新的合成层，有时纠正我遇到的奇怪问题。你可以在Chrome devtools中确认这一点，方法是进入“渲染”选项卡并选中“图层边框”框
一旦你这样做，你应该看到一个橙子的盒子周围的任何元素是在自己的合成层。