当子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"position:relative"。目前只发现ie中有此问题。 
页面源码： 

Html代码  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>relative bug</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  7. <style type="text/css">
  8. <!--
  9. #container {
  10. background:blue;
  11. height:100px;
  12. width:300px;
  13. overflow:auto;
  14. /*position:relative;*/
  15. }
  16. #container>div {
  17. background:red;
  18. height:300px;
  19. width:150px;
  20. margin:0 auto;
  21. position:relative;/*这句会触发bug*/
  22. }
  23. -->
  24. </style>
  25. </head>
  26. <body>
  27. <div id="container">
  28. <div></div>
  29. </div>
  30. </body>
  31. </html>

解决方法：为父元素也添加"position:relative"设置。在上例中，只需把#container的注释还原即可。 
以下是正常页面：

"position:relative"在IE中的Bug的更多相关文章

  1. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  2. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  3. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  4. CSS中margin和position:relative的定位问题

    一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. position:relative和z-index解决元素边框重合小bug

    由于margin-left:-1;导致一边重合造成以上情况. 解决方法:给元素增加position:relative样式,且给选中的样式增加z-index:1;高于其他未选中元素即可解决.

  6. iphone下元素放在了一个position: fixed的div中无法点击

    网上的说法是这样的: iphone的浏览器有这么一个bug, 当你使用锚定或滚动页面后, 你会发现某些东西不能点击了! 如果你的这个“东西”放在了一个position: fixed的div中, 那么你 ...

  7. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  8. 转：移动开发中一些bug及解决方案

    网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,iOS好一点,而安卓就五花八门了,你可能在开发中也被它们折磨过,或者正在被它们折磨,我在这里说几个 ...

  9. IE7下position:relative的问题

    如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性.

随机推荐

  1. 【javascript】复制到剪贴板功能（支持目前各种浏览器）

    本demo支持各种浏览器复制,亲测可用(IE8,IE9,IE10,火狐,谷歌). 本demo中使用了ZeroClipboard(下载地址:https://github.com/zeroclipboar ...

  2. 字符串匹配之KMP算法

    KMP算法使用前缀函数来模拟有限自动机的后缀函数,前缀函数通过计算模式与其自身的偏移匹配的信息,本身的证明很复杂,关键在于弄懂其核心思想,下面就不赘述了,仅仅贴出代码: #include <io ...

  3. 一秒钟速算(WINFORM)

    WIN7以上的系统可以直接运行,XP的系统要按装.NET 2.0 程序下载 http://files.cnblogs.com/xe2011/%E4%B8%80%E7%A7%92%E9%92%9F%E5 ...

  4. mongodb地理位置索引

    初始化集合(经度在前,纬度在后) ? 1 2 3 mongos> db.checkins.insert({ "_id" : "101", "lo ...

  5. PHP获取客户端和服务器IP地址

    /** * 获取客户端IP地址 * @return string */ function get_client_ip() { if(getenv('HTTP_CLIENT_IP')){ $client ...

  6. VS C# 快捷键

    解决VS2010中工具箱的的不见的问题:按快捷键Ctrl+Alt+X 全屏:Shift+Alt+Enter注释选定内容:Ctrl+E+C/Crtr+E+U代码格式化:ctrl+E+F ======== ...

  7. arcmap10如果判断一个面是否含洞

    使用字段计算器,使用python !Shape.isMultipart!结果为true就是,false不是

  8. java_method_删除事务回滚

    public String[] deleteEPGroup(String groupID, String groupName) { String[] operRes=new String[3]; if ...

  9. datetimepicker 初始化只显示年

    $("#overdue2").datetimepicker({ format: 'yyyy', autoclose: true, startView:4, minView:4, t ...

  10. Unity3D 之UGUI 图片

    这里来降价下Unity3Dl的图片 先创建一个图片 图片的属性 Preserve Aspect -->保持图片的原始宽高比例 Set native Size -->图片原始尺寸 Image ...