极客观点
项目管理
HarmonyOS
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="tx">
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
划线价：商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在京东平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。
折扣：如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。
划线价：商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在京东平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。
折扣：如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。
异常问题：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
异常问题：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。
折扣：如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。
异常问题：商品促销信c息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
</div>
<input type="text" class="in" placeholder="请输入" id="in">
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>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底部？
因为你的父容器wrapper 高度设置了540，input 又是相对wrapper 定位在其底部。所以input定位的bottom 就是wrapper的高度，内部滚动条是因为tx的高度超出容器的高度，和input定位无关。所以当你滑动内部滚动条的时候，它还是在540的高度不变的。