PC端項目:
父級設置了transform: translate(0, 0);
後,子級的固定定位會失效:(解決辦法,去除父級的transform: translate(0, 0);
即可)
html:
<div class="guding">
<div class="fixed-box"></div>
</div>
CSS代碼:
.guding{
// transform: translate(0, 0);//這行代碼一旦打開,.fixed-box中設置的固定定位將失效。
}
//固定定位
.fixed-box{
position: fixed;//固定定位,常用作浮動的導航
width: 100px;
height: 100px;
background-color: lightgreen;
z-index: 1;//可以結合z-index提升層級
}
手機端項目:
只要父元素的 -webkit-overflow-scrolling
屬性值爲 touch
,子元素的 position: fixed
屬性就無效。:
css:
-webkit-overflow-scrolling: touch; /* 當手指從觸摸屏上移開,會保持一段時間的滾動 */
-webkit-overflow-scrolling: auto; /* 當手指從觸摸屏上移開,滾動會立即停止 */