当子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"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. 如何获取web中某个元素的id

    1.在原始的web界面上,切换到开发者模式,一般都有快捷键,本机的快捷键为(Ctrl+shift+I) 2.在开发者模式界面的左上角有一个放大镜的工具,点击一下,再去界面中找相应的元素,之后就可以定位 ...

  2. Ubuntu下开启root登陆

    亲手安装过Ubuntu的童鞋都知道,默认安装只会添加一个普通用户名和密码,而超级用户权限则是利用sudo命令来执行.在Ubuntu下使用root登陆或者在shell中用su命令切换到root时会提示错 ...

  3. Copy-VMFile

    将文件移到或移出虚拟机可能会产生问题.首先,你需要安装集成服务,打开文件共享.这只需要一个简单的PowerShell命令:Enable-VMIntegrationService.但是你必须登录到虚拟机 ...

  4. [caffe]深度学习之图像分类模型VGG解读

    一.简单介绍 vgg和googlenet是2014年imagenet竞赛的双雄,这两类模型结构有一个共同特点是go deeper.跟googlenet不同的是.vgg继承了lenet以及alexnet ...

  5. spring mvc[转]

    Spring 注解学习手札(一) 构建简单Web应用 Spring 注解学习手札(二) 控制层梳理 Spring 注解学习手札(三) 表单页面处理 Spring 注解学习手札(四) 持久层浅析 Spr ...

  6. uva340 数字匹配检索问题

    这道题目大意是:给定一个secret code,然后输入guess code,让你编程给出提示,提示的格式是(i,j),其中i表示strong match的个数,j表示weak match的个数.所谓 ...

  7. 使用DrawerLayout实现QQ5.0侧拉菜单效果

    在上一篇文章中,我们介绍了怎么使用DrawerLayout来实现一个简单的侧拉菜单(使用DrawerLayout实现侧拉菜单),也就是我们常说的抽屉效果,GitHub上类似效果的实现方式非常多,实现出 ...

  8. Java Inner class

    2016-03-27 内部类:就是把一个类的定义放在另外一个外围类定义的里面. class OutterClass{ class InnerClass { } } 1. 内部类主要有四种:成员内部类( ...

  9. [Form Builder]Oracle Form系统变量中文版总结大全

    转:http://yedward.net/?id=57 Form中的系统变量,它存在于一个Form的整个运行时期的会话之中,变量包含了有关Form相关属性的字节信息.有些变量标明了当前状态,还有些变量 ...

  10. Storm集群扩容——从单机模式拓展到集群模式，以此类推

    Storm是分布式的实时流处理系统,单机模式肯本不能体现其强大特点,尤其是当需要处理的数据很大很快的 时候,Storm可以随时扩容,而且操作非常简单,编写的应用程序自动负载均衡. 前面已经介绍了如何安 ...