css相对定位失效,css绝对定位失效问题

html:

Document

京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。

划线价：商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价(如厂商指导价、建议零售价等)或该商品在京东平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。

折扣：如无特殊说明，折扣指销售商在原价、或划线价(如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价)等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。

划线价：商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价(如厂商指导价、建议零售价等)或该商品在京东平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。

折扣：如无特殊说明，折扣指销售商在原价、或划线价(如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价)等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。

异常问题：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。

京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。

京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。

京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。

京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。

京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。

京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。

京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。

异常问题：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。

行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。

折扣：如无特殊说明，折扣指销售商在原价、或划线价(如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价)等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。

异常问题：商品促销信c息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。

css:

body {

font-size: 12px;

}

.in {

position: absolute;

bottom: 0;

left: 5%;

width: 90%;

height: 2rem;

border-radius: 4px;

padding: .5rem;

box-sizing: border-box;

border: 1px solid gray;

}

.tx {

font-size: 1rem;

border: 1px solid green;

}

.wrapper {

position: relative;

border: 1px solid red;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;

padding: 10px;

box-sizing: border-box;

height: 540px;

}

* {

margin: 0;

padding: 0;

}

.wrapper宽度固定,input相对.wrapper定位，但却随着.tx的滚动而滚动，没有固定在.wrapper底部，为什么？

效果图：

初始界面：

.wrapper内部滚动后的界面：

理想中效果不应该是input始终固定在.wrapper底部？