浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复出错......于是决定把重叠问题弄清下,把z-index理顺下。
经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序。总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发。
http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html从文档流认识html
写html,css的同学应该需要清楚什么是文档流。文档流:将窗体自上而下分成一行一行,
并在每行中按从左至右的挨次排放元素,即为文档流。
每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。内联元素也不会独有一行.
一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位.
然则在IE中浮动元素也存在于文档流中。
浮动元素不占任何正常文档流空间,而浮动元素的定位照样基于正常的文档流,然后从文档流中抽出并尽能够远的挪动至左侧或许右侧。当一个元素脱离正常文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
基于文档流,理解以下的定位形式:
相对定位:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
绝对定位:即完全离开文档流, 相关于position属性非static值的比来父级元素进行偏移。
固定定位:即完全离开文档流,相关于视区进行偏移。
文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。
网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position来控制。
看看CSS 2.0对position的定义:检索对象的定位方式。共有4种取值。
absolute:绝对定位。将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义
。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。
fixed:固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置。
relative:相对定位。对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。
static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
inherit:继承值,对象将继承其父对象相应的值。
http://www.jianshu.com/p/cd056edb479b
发现同学们的div页面,有的没有居中,为什么呢??????在技术的领域是没有边界的,各个互联网大牛也是相互总结和学习的。
给大家推荐一篇大牛的总结:
div居中以及div中的元素居中 - 戈胡 - 博客园 http://www.cnblogs.com/guohu/archive/2012/09/17/2689893.html
好同学,好朋友。
http://http://www.cnblogs.com/nzbin/p/5836949.html
有趣的CSS像素艺术
像素艺术作为一种遗失的艺术形式,与超清晰,高分辨率图片相比黯然失色。我在CodePen上浏览时偶然发现了一些像素艺术,它提醒我这种艺术是多么令人敬畏!
大家都喜欢动漫吧 动手试试把!!!!
http://www.linqing07.com/resume.html
神人之作,同学们看看!!
Sublime text 2/3 中 Package Control 的安装与插件方法
给 #承德 HTML5方向课# 指派了新任务。
任务一 表格、表单实现课程表以及简历页面
1、使用表格布局实现本学期课表效果
要求:
(1)使用表格完成布局,给表格添加宽度为1,合理进行单元格的合并。
(2)代码结构清晰,合理嵌套、缩进,标签书写规范。
效果图:
2、使用表格、表单完...