可以总结为:
fix 会被遮挡,
有定位只顶定位元素(absolute)
没有定位顶整个都顶
在移动端布局,尽量不要用fixed定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: blue;
}
.con{
height:600px;
line-height: 1300px;
text-align: right;
}
.foot{
background: red;
width: 80%;
height: 80px;
border: 0px;
text-align: center;
position: absolute;
bottom: 0;
}
/*
如果使用的是固定定位,那么是相对于浏览器定位的。是不会变的,所以当 h5 键盘出现后,就会遮挡住(因为位置不会变嘛)
其他的方式(绝对定位,或者不定位)都会被顶起,顶起来是好的,微信就顶起来了
可以总结为:
fix 会被遮挡,
有定位只顶定位元素(absolute)
没有定位顶整个都顶
*/
</style>
<body>
<div class="con">
我是内容
</div>
<div>
我是没有定位的元素
</div>
<input class="foot" placeholder="体统">
</body>
</html>