HTML 关于绝对定位的问题手机端
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 关于绝对定位的问题手机端相关的知识，希望对你有一定的参考价值。
我在一个DIV里写了position:fixed;将这个DIV定位在底部，电脑端无问题，当我在手机端向下滑动时DIV位置就不一样了！用过别的浏览器都一样但用QQ自带的浏览器时就跟电脑端一样不会像图片里所示。注:图1正常，图2不正常，图3正常
发错了这是图2
1、用js获取手机屏幕高度，然后你直接用absolute从上往下写top高度=屏幕高度-浮动条本身高度
2、做伪拖动，也就是并不是实际拖动手机的html高度，而是靠overflow的溢出属性，把需要拖动的内容放在上面的div里，然后用js动态判断手机屏高度然后再赋值。最下面的div本身不做任何浮动处理，直接跟在后面（不过这个也有坑，overflow的拖动体验不如原生拖动，手机不给力可能会一卡一卡的，需要webkit的属性支持）
顺便想到新的css3的flex结构，不过这个我自己没试验过，不知道能不能成为新的解决办法，愿意的话你自己也能试试。 参考技术A 贴出代码，不然很难分析出问题
绝对定位对margin外边距的影响
绝对定位对margin外边距的影响:
关于什么是绝对定位和外边距这里就不多介绍了，具体可以参阅以下两篇文章。
（1）.绝对定位可以参阅CSS的绝对定位一章节。
（2）.外边距可以参阅CSS的外边距一章节。
下面就通过代码实例介绍一下绝对定位对于margin外边距的影响。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } #box{ width:200px; height:100px; background:red; margin-left:50px; } #antzone{ width:100px; height:50px; background:green; position:absolute; margin-left:10px; left:0px; } </style> </head> <body> <div id="box"> <div id="antzone"></div> </div> </body> </html>
由上面的代码可以看出，元素的margin外边距的参考对象由原来的父元素，变成了绝对定位参考元素。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18132
更多内容可以参阅:http://www.softwhy.com/divcss/
以上是关于HTML 关于绝对定位的问题手机端的主要内容，如果未能解决你的问题，请参考以下文章