1. 程式人生 > >微信小程式 position: absolute位置錯亂問題

微信小程式 position: absolute位置錯亂問題

介面效果
這裡寫圖片描述

碰到的問題: 子佈局設定position: absolute,

這裡寫圖片描述

解決辦法: 子佈局的父佈局一定要設定position: relative。

如果父元素 不加這個屬性 就會再往外面一層,如果外面一層還未找到relative就繼續向外 最終相對於body。 找到哪一層有relative,就相對於那個父佈局。

父佈局:

position: relative;
  width: 210rpx;
  height: 100rpx;

子佈局:

position: absolute;
  bottom: 0;
  right: 0;
  width: 50rpx;
  height
: 50rpx;


子佈局使用position: absolute,父佈局一定要設定position: relative;