css的position relative兼容问题与解决办法
position:relative在css设计中有着居住轻重的作用,如果你还没有用过它那么真是巨大的遗憾,以前做过div title提示框的时候有个箭头定位问题,当时的解决办法就是多套用一层div并且留白一定大小,用来背景显示箭头,但是发现箭头永远在下面,没有办法遮盖
主体融合的部分
,所以效果也就不好,当然,聪明的您可能已经有更好的解决办法了,用position:absloute又不能完全解决问题,每次要定位实在是一件麻烦的事情,分辨率调整等等都要重新计算,也影响性能,position:relative就是一个最好的解决办法,至于用法很简单,网上很多,在此就不再累述。
但是实际使用中发现一个兼容性的问题,position:relative是指针对上级目录的相对决定定位,他是浮动在页面上的,但是相对父级是占有空间的,实验证明他们的top属性针对的对象不一致:firefox chome IE7、8等不会出问题,就是针对他的直接parent y坐标定位,但是遨游、腾讯等ie内核的包装浏览器就会不一样,他们针对的是书写位置的上一个直接对象,这样做出来的浮动层在浏览器下就不兼容了,y坐标不统一(估计IE6也会有这样的问题,没有测过)
。有人可能说这些非主流浏览器还顾及他们干什么,须不知国内有多少用户使用的是包装ie内核的浏览器,而非ie本身,做程序的不能存在这种侥幸心理。
看清楚问题所在解决办法就很简单了,将需要relative的元素插在parent元素的最前面,这样就css统一了,如果你是用的是jquery的话,那么prepend就是干这个的,很方便。
但是这样做又有一个新的问题,正因为元素是相对绝对定位的(对于父页面相对,而且占有空间,对于父的兄弟是绝对的,可以覆盖),所以
relative后面的部分会被推挤下去,这样虽然标准统一了,但是这个位置还是会让布局变形。
可以这样解决:比如有如下一个
relative定位层:<div class='Lodding'></div>,Lodding
定位是relative的,可以在他外面再套嵌一层div:
<div style='float:left;'>
<div class='Lodding'></div>
</div>
然后再把这一块附加到需要覆盖定位的文档内部最后边,再用top属性向上或者left向左偏移就可以了,这样还是可以兼容的情况下完成完美定位。
相关文档:
实现Gridview表头固定可以通过CSS来实现
将GridView放进一个Panel中,然后设置Panel可以有竖滚动条(参见我的另一篇为Gridview生成滚动条)。设置Gridview的Style为<HeaderStyle CssClass="GridViewHeader" />
.GridViewHeader {
position:relative ;
tabl ......
1,无图片纯css圆角框
收录理由:兼容性强,不用图形
图一
特点:
1.不用任何图形,使用很多个div容器模拟出圆角效果。
2.兼容性:通杀所有浏览器
缺点:
1.构造这个圆角需要加入太多的无语义的标签,结构比较冗余。
2.重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,则其灵活性不够。
3.边框颜 ......
原理:
当两个同父元素z-index相同时,后面的元素显示在上面。
当z-index超过浏览器最大值时,浏览器会按最大值计算。
方法:
连续放置两个div元素d1,d2;并设定position:absolute及不同背景色。
设定d1.z-index = max + 1, d2.z-index = max;
当max + 1有效时,d1在前;当max + 1 无效时,d2在前。(参看原理) ......
注:本学习笔记只是自己的一些备忘,初学者的东西不具有参考性,请到W3School(http://www.w3school.com.cn/css/index.asp)进行系统学习。 学习CSS我使用的工具是Visual CSS,可以实现同步预览,快速学习编辑CSS。 1.CSS的作用:用来规定网页中的内容的显示方式,避免给HTML增加很多的属性而将代码变得臃肿。 2.CSS ......
jQuery插件: jquery.widget.shadowbox.js
/**
* 一个简单的设置DIV阴影的插件
*
* 功能:
* 1. 根据阴影宽度自动调整外层容器宽度,以及透明度
* 2. 可定义ShadowBox的宽度和高度
* 3. 可用CSS样式表定义可视化样式
*
* @author joe.he <developerworks@163.com>
* @copyright irgs.cn
*/
(fun ......