您现在的位置是：网站首页> 编程资料编程资料
绝对定位的元素在ie6下不显示隐藏了的有效解决方法绝对定位元素被遮挡的解决方法CSS绝对定位元素left设为50%实现水平居中IE7中绝对定位元素之间的遮盖问题示例探讨将一个绝对定位的div水平垂直居中对齐css教程之绝对定位使用详解有关绝对定位的全面理解
2021-09-06
889人已围观
简介 当绝对定位元素的邻近浮动元素的宽度大于父层宽度减3时，该绝对定位元素在ie6下面会隐藏，解决方法就是调整浮动元素的宽度，即宽度小于或等于父层宽度减3
问题描述：
在 ie6 中如果一个浮动元素与绝对定位元素相邻的话，在某些情况下绝对定位元素将会消失。
产生原因：
只有当绝对定位元素的邻近浮动元素的宽度大于父层宽度减 3 时（即如果父层宽度是 300px，浮动元素的宽度大于 297px），该绝对定位元素在 ie6 下面会隐藏。
html：
绝对定位的元素在ie6下不显示
css：
.w{border:3px solid #000;color:#fff;height:200px;position:relative;width:300px;}
.pa{background:orange;height:100px;position:absolute;right:10px;top:10px;width:100px;}
.fl{background:gray;float:left;height:100px;width:100%;}
ie6 浏览器效果：
其他浏览器效果：
解决方法：
1、调整浮动元素的宽度，即宽度小于或等于父层宽度减 3；
2、在浮动元素与绝对定位元素之间添加一个空的 div（推荐）。
还是以上面的实例为参考：
绝对定位的元素在ie6下不显示
ie6 浏览器和其他浏览器效果：
在 ie6 中如果一个浮动元素与绝对定位元素相邻的话，在某些情况下绝对定位元素将会消失。
产生原因：
只有当绝对定位元素的邻近浮动元素的宽度大于父层宽度减 3 时（即如果父层宽度是 300px，浮动元素的宽度大于 297px），该绝对定位元素在 ie6 下面会隐藏。
html：
复制代码
代码如下:浮动元素
绝对定位元素
css：
复制代码
代码如下:.w{border:3px solid #000;color:#fff;height:200px;position:relative;width:300px;}
.pa{background:orange;height:100px;position:absolute;right:10px;top:10px;width:100px;}
.fl{background:gray;float:left;height:100px;width:100%;}
ie6 浏览器效果：
其他浏览器效果：
解决方法：
1、调整浮动元素的宽度，即宽度小于或等于父层宽度减 3；
2、在浮动元素与绝对定位元素之间添加一个空的 div（推荐）。
还是以上面的实例为参考：
复制代码
代码如下:浮动元素
绝对定位元素
ie6 浏览器和其他浏览器效果：
相关内容
- CSS背景色渐变写法兼容ie6至ie9css 各浏览器下的背景色渐变【代码】css3 给背景设置渐变色的方法
- web中自定义鼠标样式将其显示为左右箭头CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 浅析几个CSS3常用功能的写法纯CSS3实现3D波浪形动画有波浪起伏的效果一款简易的CSS3扁平化风格联系表单有创意非常特别的10款CSS3进度条Loading动画很有特色的CSS3小球浮动按钮与普通按钮有所不同纯CSS3绘制的蚱蜢动画还会眨眼非常酷纯css3样式属性制作各种图形图标样式代码纯CSS3实现页面加载后启动蝙蝠侠变身动画css3 自定义字体font-face使用介绍基于css3实现的鼠标悬停中英文切换导航菜单纯CSS3实现圆角效果（含IE兼容解决方法）
- 子Div使用Float后撑开父Div的几种方法设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- CSS清除浮动大全共8种方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- Web页面布局方式小结 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘收罗CSS布局中有关水平和垂直居中的N种方法div+css布局中选择使用html标签的方法CSS3 Columns分列式布局方法简介css网站布局实录学习笔记第三部分网页布局与定位css网站布局实录学习笔记第一部分用css实现十字的布局示例代码CSS div布局需要注意的两点使用div+css布局过程中在什么时候使用table呢DIV CSS布局中position属性用法深入探究
- CSS控制DIV永远固定在页面底部不随滚动而滚动纯div+css实现的固定在网站底部不随网站滚动的在线客服特效源码CSS样式设置div滚动条示例代码css将div层固定显示在页面底部不随滚动条滚动css实现div自动添加滚动条(图片或文字等超出时显示)div css 滚动条样式 DIV滚动条属性及样式设置方式css 给div添加滚动并隐藏滚动条
- Less里css表达式的写法示例介绍LESS 让css也支持变量，运算符，include,嵌套规则等等 less让css具有动态语言的特性LESS 让css也支持变量，运算符，include,嵌套规则CSS less优化学习CSS预处理器:Sass和less进行对比less开发指南浏览器端如何使用Less
- css中postion的fixed与absolute区别详解CSS position:absolute全面了解css中position属性使用详解css中定位中的absolute和relative是什么意思css中position属性(absolute|relative|static|fixed)概述及应用CSS position属性absolute relative等五个值的解释关于CSS absolute与relative不得不说的话
- 通过CSS规则禁止选中文字的实现代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
