在实际开发中,div+css经常会碰到层级的问题 其中有个很头痛的就是z-index控制层级时,老是发现z-index不起作用 老杨依据自己的经验,总结出以下步骤: 1.判断被覆盖的层(想要置顶的层)的postion是否也为relative或者absolute 2.如果1成立,则判断是否此层的z-index比误覆盖的层的z-index数值大 3.如果2成立,判断是否此层的父级元素比误覆盖的层的z-index数值大 4.如果3成立,判断是否此层的父级元素比误覆盖的层的父级层的z-index数值大

在使用z-index这个属性之前,我们必须先了解使用z-index的必要条件: 1.要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:relative(定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed)样式. 2.不要给想控制"上.下"的元素设置z-index,而是对他们的父容器设置z-index样式. 看懂了以上两点,我们就明白了如何才能使用z-index这

.column{ position: relative; float: left; padding: 30px 0; width: 25%; z-index: 0; background-color: orange; text-align: center; } .button:before,.button:after{ content: ''; position: absolute; } .button:before{ top: -5px; bottom: -5px; left: -5px; r

ie7下z-index无效的问题之前做练习的时候遇到过,百度解决掉之后就丢脑后了.今天项目中又发现这个bug,无奈又去百度,这次还是记下来,节省了百度的时间还能小装一把... 需求是这样的: 页面中的两个层默认隐藏,点击这个层的展开图标时要把这个层显示出来,点收起的时候再把这个层隐藏,因为两个层是上下排列,所以点击展开的时候正常的显示应该是这样的,如下(丑)图: 实现的代码我也贴一部分上来,逻辑就是点哪个层,哪个层的z-index值在原来的基础上加高点 $isSales.append($('<e

一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时,却是不同的结果. demo 用如下小demo测试: <aside class="container"> <div class="test"> </div> </aside> .container{ position: r

今天在调试前端页面的时候,发现addflowrank这个元素的click事件不能触发了.下图是它的元素结构. 用开发者工具试图定位这个元素,看看它到底怎么了.发现:无论我怎么用光标定位这个元素都定位不到,像是被外层div锁在里面了.我开始以为是不是什么冒泡机制在作怪,调试了一会发现不对. 我看见父div上有position:relative  和 z-index.我看是不是父级标签层次太高了,我就调负数,发现还是不能解决问题. css的positon我总是模模糊糊的在脑子里. 其实他的几个值是这

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-03) 点评:绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了.解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index. <div style="position:rel

父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,子元素的z-index是相对于父级元素的index. <div style="position:relative;z-index=2"> <p style="position:absolute;z-index=99"> ...(要在上层显示的内容)</p> <div> <div style="posit

一.jQuery 发布 1.9 正式版,最后支持 IE 6/7/8,2.0以上的版本都不支持这三个浏览器了. 二.小箭头的写法与旋转切换(一直以为这样的只以切图片,原来未必哦.) <style> * { margin:; padding:; } i, s { font-style: normal; } .box { width: 50px; height: 50px; background: lightpink; margin: 200px auto; position: relative;

解决办法: 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index. <div style="position:relative;z-index=2"> <p style="position:absolute;z-index=99"> ...(要在上层显示的内容)</p> <div> <div style=&

绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了.解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index. <div style="position:relative;z-index=2"> <p style="pos

解决办法: 父级元素加上position:relative;并设置z-index父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index <div style="position:relative;z-index:2"> <p style="position:absolute;z-index:99"> ...(要在上层显示的内容)</p> <div> <div style=&quo

在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. 效果图 制作标签页(通常说成滑动门)的实现思路是当鼠标在标签上时下面div会显示和标签相对应的内容,随着标签的 改变,下面的div也会对应改变样式 我们要实现上面的效果: CSS: ul,li { margin: 0; padding: 0; list-style: none; } #tabfir

在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. 效果图 制作标签页(通常说成滑动门)的实现思路是当鼠标在标签上时下面div会显示和标签相对应的内容,随着标签的 改变,下面的div也会对应改变样式 我们要实现上面的效果: CSS: ul,li { margin: 0; padding: 0; list-style: none; } #tabfir

1,float:right; 在IE错位问题 : 使用position:absolute:right:0px; 2,汉字在float状态下 折行 ,可能是因为父级宽度不够, 改用 display:inline-block: 3,IE7下的hack 符号 #line-height:18px; *margin-top 4,margin负值在IE7下不起作用: 为父级添加overflow:hidden; 5, IE7 对display:inline-block 支持不友善 两种解决方案: 方法一: d

如图,1,3为top,bottom div,2为iscroll,4为遮罩层,如果1设置z-index后,不设置遮挡不住2,遮罩层4弹出会卡顿,既不设置z-index,又能遮挡iscroll的办法是在html里先写2,再写1,3,设置1的top为0这样同样是z-index为0,起到1也能遮挡住2,效果. 后来发现在2外面设置overflow:auto也是可以的,之前一种方法在ios浏览器上有问题.

z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基础展开叙述.这里要讨论的是最近在项目上对z-index在ie6下自己的一个认识,希望能帮助在z-index兼容上遇到问题的同行一个参考. 首先是demo,点击就可以看到相关的demo了,这个demo就是一个分类导航的模块,实现的功能是鼠标经过时当前标签切换背景以及弹出相关层,代码的结构好坏不做进一步

多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复出错......于是决定把重叠问题弄清下,把z-index理顺下. 经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序.总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发. 元素位置

多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复出错......于是决定把重叠问题弄清下,把z-index理顺下. 经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序.总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发. 1.元素

谈起它们,想必大家都不陌生.relative,相对定位嘛:absolute,绝对定位嘛.但是它们到底是个啥东东呢? 看看w3c的定义,见下表 定位 含义 relative 元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留. absolute 元素框从文档流完全删除,并相对于其包含块定位.包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框. 我靠,说

在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z- index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed. 1.第一种情况(z-index无论设置多高都不起作用情况): 这种情况发生的条件有三个: 1.父标签 position属性为relative: 2.问题标签无position属性(不包括static): 3.问题标签含有浮动(f