当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS position属性定位总结

时间:2013-03-02 03:41来源:未知 作者:admin 点击:

标签:CSS position属性定位总结 CSS(655)另外(8)总结(38)咱们(25)属性(68)晓得(5)position(4)定位(32)
另外咱们也晓得给一个标签设置magin、padding、border等时,它的顺序是上右下左,这个顺序跟方位读取次序也不相似的关联。为此我总结了一份Demo页面,供大家对比喻位读取顺序,也算是一个总结笔记吧。 附文中jQuery的animate示例: 早上写了一些对于postion
CSS position属性定位总结》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331I2013.htm

另外咱们也晓得给一个标签设置magin、padding、border等时,它的顺序是“上右下左”,这个顺序跟方位读取次序也不相似的关联。为此我总结了一份Demo页面,供大家对比喻位读取顺序,也算是一个总结笔记吧。

附文中jQuery的animate示例:

早上写了一些对于postion的款式做测试,发明不管给某个DIV设置了多少个方位(当然最多到4个),也不论寄存的顺序是如何倒置,它的读取顺序仍旧是top-bottom-left-right.很合乎日常所说的“高低左右”规矩。这与我之前懂得的不相契合。

所以,不要试图用JS来改变已设定top和left的DIV的right和bottom值,当然转变top和left值仍是会有后果出来的。

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代码: #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察看到的代码不变:

--> [网站建设之]CSS:position属性定位总结

Tag:   定位   position属性   CSS     定位   position属性   CSS  

我始终认为css中position定位时一直是读取最后呈现两个方位属性的值。昨天给一共事演示jQuery的animate殊效时,我试图通过js来把持已经设置过top和left的DIV的right属性为0,以到达滑动到最右边的效果。结果没有效果,很是愁闷。

相关的主题文章:
(责任编辑:网站建设)
CSS position属性定位总结相关文章
上一篇:CSS opacity-实现图片半透明效果 下一篇:css reset重置基础代码
回到顶部