position属性详解

这段时间在努力的弄清一些很基本的概念，把基础夯实好了才是硬道理。看我前几篇文章也知道，我采用的方式基本上就是网上搜他人总结，然后自己做demo并总结，能够在这个基础上再发现点问题是最好的了。这算是一种节约时间而采用的折中的学习方法吧，你所遇到的问题别人都遇到过，你需要做的就是google找到他们的解决方案并吸收为自己的知识，在此层面上再去追求创新和拔高。 今天要总结的是css的position属性。 参考资料：http://www.qianduan.net/css-position.html static:默认值 如果没有指定position属性值，支持position属性的html对象都是默认为static，可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照你所编写的html标签的顺序依次呈现。 relative:相对定位 此position属性值保持对象所在文档流中的位置，也就是说它具有和static相同的呈现方式，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖；与static属性值不同的是，设置了relative的对象，可以通过top,left,right,bottom属性设定自己的新显示位置，这四个属性的取值是相对于其父元素的。 absolute:绝对定位 和relative不同的是，这个position属性值会将当前对象拖出文档流，后面的对象会占有原来的位置，也就是说，当前对象的呈现是独立显示的，但是它的位置在指定top,left,right,bottom任一属性之前仍是有继承性的，这时的4个属性的取值是相对于浏览器的，和文档流无关了。 fixed：固定定位 元素的定位方式同absolute类似，但它的包含块是视区本身，相对于窗口。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。 突然发现这些很基础的东西其实《精通css》上面都有，网上搜的也就是这些东西，只是自己没有跟着书本做例子看过没印象而已，没事还是要经常翻一翻《精通css》。好吧，demo在下面。 DEMO 这次做demo顺便学习了下css3的text-shadow属性，记录如下： text-shadow语法为：text-shadow：color offset-x offset-y blur-radius | offset-x offset-y blur-radius color; color可以使用rgba，好处和box-shadow一样，可以设置透明度。demo中有立体感的h1标题就是使用的这个。