文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

关于IE6下绝对定位元素莫名消失的问题

这是个很老的bug了，我想一般大家都遇到过，以前我是纯凭经验，让绝对定位的元素不挨着浮动元素就OK了，不过一直没去研究它形成的原因。...今天做页面又遇到了这个可爱的BUG，本着一探究竟的心态google了一下。...IE6/7不显示绝对定位层，FF显示； 3.当绝对定位层的邻近浮动层的宽度等于父层宽度时，以及没有清除浮动时，IE6不显示绝对定位层，IE7/FF显示； 4.当绝对定位层的邻近浮动层的宽度等于父层宽度时...，有清除浮动时，IE6/7不显示绝对定位层，FF显示； 就目前来说我个人的解决办法有两条，第一取消浮动，第二让绝对定位的元素不要挨着浮动的标签。...蓝色上那位哥们提出了另一个办法，就是在绝对定位的层跟浮动层中间插个空的标签。

813100
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    外边距合并规则

    像JS作用域一样，默认大家都位于最外层作用域（最外层块格式化上下文），遇到普通块级盒就放进块格式化上下文，遇到特殊的（浮动，绝对定位的等等）就新建一层作用域（建立新的块格式化上下文），它里面的元素都放进这个内层作用域...（甚至一个浮动盒与它的流内子级之间也不会） 建立了新的块格式化上下文的元素（例如，浮动盒与’overflow’不为’visible’的元素）的外边距不会与它们的流内孩子合并 绝对定位的盒的外边距不会合并...（甚至与它们的流内孩子也不会） 内联块盒的外边距不会合并（甚至与它们的流内孩子也不会） 流内块级元素的下外边距总会与它的下一个流内块级兄弟的上外边距合并，除非该兄弟（元素）具有间隙 流内块级元素的上外边距会与它的第一个流内块级孩子的上外边距合并...，条件是该元素没有上边框和上内边距，并且其孩子不具有间隙 一个’height’为’auto’并且’min-height’为0的流内块级盒的下外边距会与它的最后一个流内块级孩子的下外边距合并，条件是该盒没有下内边距和下边框...’的某些块盒）不与孩子合并 非块级盒（内联块）不合并 一般情况下，兄弟元素的下上外边距，父子元素的上外边距、下外边距，元素自身的上下外边距会合并 前3点针对“相邻”的前提条件（流内，同BFC，块级盒），

    1.6K30

    CSS margin合并问题

    '值为'visible'以外的元素）与它的子元素的外边距不会折叠 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素） 绝对定位元素不与任何元素的外边距产生折叠 inline-block元素不与任何元素的外边距产生折叠...一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。...注意： 浮动元素和绝对定位元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流，违反了上面所述的两个margin是邻接的条件同时，又因为浮动和绝对定位会使元素为它的内容创建新的BFC，因此该元素和子元素所处的...但是浮动元素脱离了当前的BFC并不影响它后面的兄弟元素，后面的兄弟元素与浮动元素前面的元素依然在同一个BFC当中，所以，它们之间的margin还是会折叠的。...使父元素或子元素声明为绝对定位：position:absolute/fixed; 给父元素添加属性 overflow:auto/auto/scroll; 子元素的margin使用父元素的padding

    1.5K30

    CSS--外边距合并的问题

    当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。...请看下图： image.png 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。...在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并： image.png 如果这个外边距遇到另一个元素的外边距，它还会发生合并： image.png 这就是一系列的段落元素占用空间非常小的原因...外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。...浮动的块级元素的margin-bottom总是与它后面的浮动块级兄弟元素（floated next in-flow block-level sibling）的margin-top相邻，除非那个同级元素使用了清除操作

    1.6K20

    CSS入门指南-3：定位元素

    现在，第三段从原来的元素（body）中挣脱了出来，与它在文档中的默认位置相比向下移动了25像素，向右移动了30像素。 需要注意的是，除了这个元素自己相对于原始位置挪动了一下以外，页面没有任何改变。...例如，top设置一个值“20px”在一个相对定位的元素上，这个元素会在原来位置向下移动“20px”。...事实上，一个相对定位元素同时设置了“top”和“bottom”位移属性值，实际上“top”优先级高于“bottom”。...下面我们把内部 div 设定为绝对定位，来看一下变化。...这里由于不存在相对定位的其他祖先元素可以作为定位上下文，绝对定位只能相对于 body 定位。 事实上，只要把元素的外边距和内边距设定好，多数情况下使用静态定位就可以实现页面布局了。

    84610

    HTML定位简介

    但事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）...针对一个相对定位的元素所产生的。我们看下面的图：  ?...我们看一下模型图示： ? 我们看到，这个图中父级为黑灰色区块，子级为青色区块。父级是相对定位，子级是绝对定位。子级设置了顶部位移50个像素，左倾位移50个像素。...现在我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。 　　...可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本 流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。

    2K20

    重拾CSS规范之BFC & IFC

    浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和’overflow’不为’visible’的块盒会为它们的内容建立一个新的块格式化上下文...utm_source=website&utm_medium=embed&utm_campaign=7qoutta5 margin 一文中 margin合并规则 中写到了这么一句话，新建了块格式化上下文的元素不会与它的子元素的...而且我们可以发现， BFC 就是一个密闭的容器 ， BFC 里面的元素无法对外界元素在布局上产生直接的影响。...（为什么我要用‘直接’呢，因为它完全可以撑开 BFC 元素，来‘挪动’外界元素的位置） 那我们再考虑一个问题， 产生了新的 BFC 的盒会与它的兄弟盒产生 margin合并 吗？ 当然是会的。 3....除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄） 这里主要涉及到的就是多栏自适应布局的应用了。

    42530

    揭示不为人知的CSS

    当 box-sizing设置为border-box 时，padding和border将减少内容区域的内部宽度，而不是增加元素的整体宽度。这意味着一个元素的宽度现在与它的可视宽度相同。 ?...如果元素采用的是绝对定位、浮动定位或者有一个不一样的 格式化上下文时，边距不会发生重叠现象，以及在其他一些不太可能的情况下。 如果你感到困惑，没关系。边距不会发生重叠的规则是复杂的。...从技术上讲，外部显示类型决定了元素如何参与其父元素的格式化上下文。 内部显示类型确定该元素将生成什么样的格式化上下文。 这将影响其子元素的布局。 想象一下Flexbox容器的工作原理。...事实上，这甚至不是现代 清除浮动技术 的工作方式。 定位方案 一个盒元素可以根据3种定位方案中的一种来布局。这三种方案分别是：正常文档流布局, 浮动布局 和 绝对定位布局。...堆叠底部的图层首先绘制，堆叠上方的元素出现在顶部（相对于底部来说是在上层）。 在一个绝对或相对定位的元素上设置z-index 是建立新的堆叠上下文的最常见方式。

    2.1K30

    用 CSS 隐藏页面元素的 5 种方法

    你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场合下使用哪一个方法。...看下面的例子： 看 @SitePoint 提供的例子“用 opacity 隐藏元素” 当你的鼠标移到被隐藏的第 2 个的区块上，元素状态平滑地从完全透明过渡到完全不透明。...在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。...下面是采用这种办法的 CSS： .hide { position: absolute; top: -9999px; left: -9999px; } 下面的例子阐明了怎样通过绝对定位的方式隐藏元素...，并让它和前面的那个例子效果一样： 看 @SitePoint 提供的例子“用 position 属性隐藏元素” 这种方法的主要原理是通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见

    2.5K40

    PHP命名空间（Namespace）初探

    > 复制代码 要注意的是，当前脚本文件的第一个命名空间前面不能有任何代码，下面的写法都是错误的： //例一 //在脚本前面写了一些逻辑代码 复制代码 调用公共空间的方式是直接在元素名称前加 \ 就可以了，否则PHP解析器会认为我想调用当前空间下的元素。除了自定义的元素，还包括PHP自带的元素，都属于公共空间。...要提一下，其实公共空间的函数和常量不用加 \ 也可以正常调用（不明白PHP为什么要这样做），但是为了正确区分元素，还是建议调用函数的时候加上 \ 名称术语 在说别名和导入之前，需要知道关于空间三种名称的术语...，程序产生致命错误 //为类使用别名 use Blog\Article\Comment as Comt; $article_comment = new Comt(); //与当前空间的Comt发生冲突...> 复制代码 字符串形式调用问题 上面的动态调用的例子中，我们看到了字符串形式的动态调用方式，如果要使用这种方式要注意两个问题。 1. 使用双引号的时候特殊字符可能被转义 <?

    2.4K10

    CSS布局基础(待补充完整)

    上述例子中，虽然没有把父元素撑开，但是与它同级的兄弟元素并不会直接跑到它上面去，而是在它之下按照一下两个规则排列 2-2-1 若是浮动元素后紧跟 -> h1 ~ h6、p 这一类段落标签会自动换行...其实这是给浮动元素之后的元素用的，并不是给浮动元素本身用的；之所以要这样，是因为紧跟在浮动元素后面的普通元素都会受到影响。就比如上述说的两种紧跟浮动元素之后排列的方式。...3-3 position:absolute 绝对定位，也是直接脱离文档流，别的元素将会无视它并且挤上来 3-4 position:static 默认定位，也是每一个元素的初始定位，也就是正常文档流...具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。...4-1 触发 BFC body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells

    49010

    求职 | 史上最全的web前端面试题汇总及答案

    简述一下src与href的区别 href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。...、由先到后的顺序叠加起来，如果不发生冲突，则全部样式都有效，重复定义冲突时按照内层优先、后定义优先的原则进行覆盖，即内层子元素覆盖父元素样式、后定义的覆盖先定义的样式。...没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明） 对BFC规范的理解 BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素...• absolute 绝对定位，绝对定位脱离文档流，依据最近的已经定位（绝对、相对或固定定位）的父元素，通过 top,bottom,left,right 定位。...caller是返回一个对函数的引用，该函数调用了当前函数； callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

    1.9K10

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    , 相对定位 是相对于 盒子在普通流模式下的位置 进行设置的 ; 相对定位 是 不脱标 ( 脱离标准流 ) 的 , 原来的位置还会进行保留 ; 8、子绝父相 - 子元素绝对定位 父元素相对定位 绝对定位..., 如果父容器使用了 绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素 , 这时父元素建议使用相对定位 , 这样能保证页面的稳定性 ; 父级元素 需要 占位 , 必须使用 相对定位 ; 子元素...本质是一种 特殊的绝对定位 ; 固定定位语法 : 选择器 { position: fixed; left: 0px; top: 0px; } 固定定位元素举例说明 : 在下面的网站 , 顶部的导航栏...后面的盒子会压住前面的盒子 ; 下面的代码中 , 三个盒子都设置了绝对定位 , 先设置了蓝色盒子 , 然后设置了 红色盒子 , 最后设置了 紫色盒子 ; 最终展现出来的样式是 紫色盒子 压住了 红色盒子..., 父盒子也会被带下来 , 这就是外边距塌陷 ; 下面的示例 1 中 , 父盒子 和 子盒子 没有添加任何外边距 , 没有塌陷 ; 示例 2 中 , 为子盒子设置了 上外边距 , 结果将 父盒子也带下来了

    2.1K10

    前端零基础教学开始第六天 06 – day 多种定位方法 和 精灵图使用 元素的显示与隐藏…

    absolute 绝对定位有两个重要的概念 1、完全脱标 —-完全不占位 2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性 来设置 元素的位置 <!...position: relative; } .son{ width: 500px; height: 400px; background-color: orange; /*相对定位 绝对定位会寻找离他最近的父元素位置偏移...的特性如下 1、属性值：正整数，负整数或者0 默认值是0 数值越大，盒子越靠上 2、如果属性值相同，则按照书写顺序，后来者居上 3、数字后面不能加单位 4、注意： z-index只能应用于相对定位，绝对定位和固定定位的元素...所以：一个行内盒子，如果加了浮动，固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度 注意给行内元素设置宽高就是脱离标准流 复制代码 <!...显示 display:none 隐藏对象与它相反的是display:block除了转换为块元素之外，同时还有显示元素的意思 特点：隐藏之后，不在保留位置 visibility 可见性 设置或检索是否显示对象

    3.8K20

    【自动化测试篇 | Python】Selenium安装及八大元素定位方法

    安装步骤 安装Selenium库打开命令行（在Windows上是CMD或PowerShell，在MacOS或Linux上是Terminal），输入以下命令来安装Selenium： pip install...相对XPath更加灵活和鲁棒，因为它不依赖于页面的完整结构，当页面布局发生变化时，相对XPath有更好的适应性。...完整XPath（绝对XPath） 完整XPath，也称为绝对XPath，是从HTML文档的根节点（即html标签）开始，一层一层向下直到目标元素的完整路径。...它以单斜杠（/）开头，表示从根节点开始的绝对路径，每一级都精确指定，直到找到目标元素。绝对XPath的缺点在于，它非常依赖于页面的具体结构。...在实际使用中，推荐优先考虑使用相对XPath，因为它在多数情况下能提供更好的稳定性和灵活性。然而，根据具体情况和需求的不同，选择最合适的XPath策略是很重要的。

    28810

    用Javascript获取页面元素的位置

    制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先，要明确两个基本概念。...二、获取网页的大小 网页上的每个元素，都有clientHeight和clientWidth属性。...三、获取网页大小的另一种方法 网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。...网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。...五、获取网页元素的相对位置 网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。 有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。

    4.3K70

    【数据结构与算法】哈希表实现：闭散列 && 开散列

    如果构造一种存储结构，通过某种函数使元素的存储位置与它的关键码之间能够建立一一映射的关系，那么在查找时通过该函数可以很快找到该元素**。...好的哈希函数可以减少冲突的概率，但是不能够绝对避免，万一发生哈希冲突，得需要借助哈希冲突处理方法来 解决。...① 线性探测 ​ 比如一下场景，现在需要插入元素 44，先通过哈希函数计算哈希地址，hashAddr为 4，因此 44 理论上应该插在该位置，但是该位置已经放了值为 4 的元素，即发生哈希冲突。...线性探测：从发生冲突的位置开始，依次向后探测，直到寻找到下一个空位置为止。...插入 先查找一下是否存在重复的元素，是的话直接返回 false 然后判断一下容量和负载因子，看看需不需要扩容（下面会讲） 通过哈希函数（这里采用除留余数法）获取待插入元素在哈希表中的位置 如果该位置中没有元素则直接插入新元素

    19400

    《CSS世界》第六章 流的破坏与保护总结

    高度塌陷是为了让跟随的内容可以和浮动元素在一个水平线上。（行框盒子在正常定位状态下只会跟随浮动元素，不会发生重叠） clear属性 clear属性让自身不能和前面的浮动元素相邻。...如果clear: both;元素前面的元素就是float元素，则margin-top负值即使设置成-9999px，也没有任何效果； clear: both; 后面的元素依旧可能会发生文字环绕现象。...overflow: hidden; 容器盒子外的元素可能会被隐藏掉。 display: inline-block; IE6、7下完美，因为即BFC化又保持block也行，保留了流体特性。...但在其他浏览器下会让元素尺寸包裹收缩。 overflow overflow裁剪的边界是border box的内边缘，而非padding box的内边缘。...锚点定位发生在普通容器元素上，定位行为是由内而外的。 设置了overflow: hidden;的元素也是可以滚动的，只是滚动条不见了而已。

    1K30

    clearfix改良及overflow:hidden详解

    这是因为是否隐藏绝对定位元素实际上取决其包含块（containing block）： 10.1 "containing block" 的定义： 4....… 这意味着一个带有overflow:hidden样式的盒子，它所包含的绝对定位子元素如果溢出，并不会被隐藏——除非该绝对定位元素的包含块（containing block）就是这个盒子本身或位于该盒子内部...也就是说，如果这个绝对定位元素的包含块的层级高于拥有overflow:hidden样式的盒子，那么这个盒子里面的绝对定位元素不会被截断或隐藏。...作者提供了一个demo 页面演示这个原理（页面上的wrapper设定了overflow:hidden，但是绝对定位的子元素box1却显示在了wrapper外面的左上角，并没有被隐藏）。...你可以在twitter上follow他： @thierrykoblentz *.

    1.5K80
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券