iOS 固定定位不兼容、input获取焦点后位置不对。

153 阅读1分钟

绝对定位模拟固定定位~

原理:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>绝对定位替换固定定位</title>

<meta name="viewport" chang="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<style type="text/css">

;;}

html,body{

%; /* 必须要 */

%;/* 必须要 */

}

.dahezi{

%;/* 必须要 */

%;/* 必须要 */

overflow: hidden;/* 必须要 */

position: relative;/* 必须要 */

}

.chang_box{

%;/* 必须要 */

%;/* 必须要 */

overflow: scroll;/* 必须要 */

}

.chang{

px;

}

.fixed_box{

%;

px;

position: absolute;/* 必须要 */

px;

text-align: center;

px;

background: red;

color: #fff

}

.fixed_box2{

position: absolute;/* 必须要 */

%;

%;

rem;

rem;

background-color: #f12313;

}

</style>

</head>

<body>

<div class="dahezi">

<div class="chang_box">

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~1</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~2</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~3</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~4</div>

<div class="chang">我很长~</div>

<div class="chang">我很长~</div>

</div>

<div class="fixed_box">

原本固定的盒子1

</div>

<div class="fixed_box2">

原本固定的盒子2

</div>

</div>

</body>

</html>