当子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"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. 【面试虐菜】—— Oracle知识整理《DBA的思想天空》

    Inventory Oracle安装工具OUI用来管理Oracle安装目录的   Oracle的参数文件,启动后按照下面的顺序读取参数文件,如果读取失败,启动数据库 失败: 1  $ORACLE_HO ...

  2. Double 类型运算时的精度问题

    double 类型运算时的 计算的精度不高,常常会出现0.999999999999999这种情况,那么就须要用BigDecimal   它是java提供的用来高精度计算的工具类 以下是对这个类的一个包 ...

  3. 动手写一个快速集成网易新闻，腾讯视频，头条首页的ScrollPageView,显示滚动视图

    最终效果 更新示例.gif 示例效果.gif 示例效果1.gif 示例效果2.gif 示例效果3.gif 示例效果4.gif 示例效果5.gif 示例效果6.gif 一.构思部分: 打算分为三个部分, ...

  4. .Net设计模式_原型模式

    引言: 原型,感觉就是拷贝,只是给拷贝分了深拷贝和浅拷贝. 理解: 在C#.Net里面,我们可以很容易的通过Clone()方法实现原型模式. 任何类,只要想支持克隆,必须实现C#中的ICloneabl ...

  5. r2d_01

  6. 一个现代化的JSON库Moshi针对Android和Java

    Moshi 是一个现代化的JSON库针对Android和Java.它可以很容易地解析JSON成Java对象: String json = ...; Moshi moshi = new Moshi.Bu ...

  7. iOS 网络编程：AFNetworking

    1 简介 1.1 概念 AFNetworking网络框架并不是IOS自带的框架,而是第三方的开源框架.它是对NSURLConnection和NSURLSession API的封装,但是目前AFNetw ...

  8. sql快速生成大量数据

    先插入一条数据 insert into table(a,b,c,d) values(1,2,3,4) 然后重复执行以下sql语句 没执行一次 数据就会倍增 insert into table(a,b, ...

  9. 在虚拟机安装64位系统提示,此主机支持Intel VT-x,但Intel VT-x处于禁用状态

    进入BIOS - Security - Virtualization - Intel (R) Virtualization Technology 将 Disabled 改为 Enabled 即可

  10. php 5.3+ 连接mssql

    php5.3+里已经没有mssql的dll扩展了,需要使用SQL Server Driver for PHP 这里有两个版本有两个版本支持不同的php版本. 1.SQL Server Driver f ...