CSS:position属性定位总结
在写这篇文章之前，我一直以为css中position定位时一直是读取最后出现两个方位属性的值。昨天给一同事演示jQuery的animate特效时，我试图通过js来控制已经设置过top和left的DIV的right属性为0，以达到滑动到最右边的效果。结果没有效果，很是郁闷。
早上写了一些关于postion的样式做测试，发现不论给某个DIV设置了多少个方位（当然最多到4个），也不管存放的顺序是如何颠倒，它的读取顺序依旧是top-bottom-left-right.很符合日常所说的“上下左右”规则。这与我之前理解的不相符合。
另外我们也知道给一个标签设置magin、padding、border等时，它的顺序是“上右下左”，这个顺序和方位读取顺序也没有类似的关系。为此我总结了一份Demo页面，供大家对比方位读取顺序，也算是一个总结笔记吧。
附文中jQuery的animate示例：
Html代码：
1 2 3 4 5 | <button id="trigger">Click To Animate</button> <div id="box"> <div class="box" id="box1"></div> <div class="box" id="box2"></div> </div> |
CSS代码：
1 2 3 4 | #box { width:800px; height:200px; position:relative; padding:10px 0; border:1px dashed #eee;} .box { width:120px; height:40px; border:1px solid #f60; background:#390; position:absolute;} #box1 { top:10px; left:0;} #box2 { top:62px; left:0;} |
jQuery代码：
1 2 3 | $('#trigger').click(function() { $('.box').animate({'right': '0'}); }); |
结果执行JS后，Firebug中实时Html代码为：
而通过Cssviewer观察到的代码不变：
所以，不要试图用JS来改变已设定top和left的DIV的right和bottom值，当然改变top和left值还是会有效果出来的。
- Hiro
- http://www.ihiro.org/css-position-hack
(转载时请注明本文出处及文章链接) - 引用功能已被博主关闭！
- 评论 Feed
正在总结~~~~
我觉得不应该同时设定2个以上位置的,xy轴确定后坐标就确定了,再去改变它自己也糊涂了.Cssviewer是什么东西?
在css中写样式的时候当让只需要写两个即可，我demo中只是为了比较优先级才那么写的。
之所以要改变主要还是JS想改变时，才遇到了这个问题。
PS：Cssviewer是Firefox的插件，查看实时标签css代码的。
学习一下吧，目前还是菜鸟级别
对于编程一点都不懂
我觉得不应该同时设定2个以上位置的,xy轴确定后坐标就确定了,再去改变它自己也糊涂了~同感啊xm138.com.cn
其实我也看不太懂
学习了啊
网站顶部的背景挺漂亮
是啊，以前用jQuery1.32版本时还有动态效果呢！
谢谢分享~
虽然我对代码不懂，但是我知道这是好东西，先学习学习吧
呵呵，做前端的一看就明白的！
请问能向你买个关键字链接吗？我要买个“奥迪TT”或者“奔驰”或者“索尼笔记本”或者“诺基亚手机”的文章里的关键字链接，只要一个，新旧文章都可以，修改也可以，但是最好能是被收录的文章，并且在我们的链接上方不要有其他的外链。有兴趣的联系我，QQ：249449338
等待你的回复，万分感谢！！！
说实话，这方面我还是菜鸟级别的
先顶后看。。。
以前在某个教程里面看见过，保证水平和垂直方向各定义一个就应该没问题吧！
可惜我没看过这篇教程，不然不会遇到这问题，也不会有这篇文章了！
都是代码，看上去有点麻烦
我的网站www.aaab2b.com总是定位出错，看了网上的技术书也搞不好，超烦
css一直学不精，有点累了
看来很多人和我有同感，虽然写代码有时觉得很有成就感，可看到总是烦
经常总结，对自己对别人都是好事，呵呵，谢谢分享
以后会常来看看
写的非常好 支持
很不错啊 继续加油
哥们 互换个链接吧？？？