网页制作学习教程:CSS Position
1. position:static所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。 一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。 #div-1 { position:static; } 2. position:relative如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】 #div-1 { position:relative; top:20px; left:-40px; } 3. position:absolute当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。 #div-1a { position:absolute; top:0; right:0; width:200px; } 4. position:relative + position:absolute如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位,就可以把 div-1a 移动到 div-1 的右上方。 #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } 5. 两栏绝对定位现在就可以使用相对定位和绝对定位来做一个两栏布局了。 #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } 6. 两栏绝对定位定高一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合,因为一般我们不知道元素中会有多少文本,或者将要使用的精确的字号。 #div-1 { position:relative; height:250px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } 7. 浮动对于可变高度的列来说,绝对定位就不起作用了,以下是另外一个方案。 我们可以浮动一个元素,使它移动到左边/右边,并且是文本环绕着它。这主要用于图像,但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。 #div-1a { float:left; width:200px; } 8. 浮动列如果我们把一个元素向左浮动,并且把第二个元素也向左浮动,they will push up against each other。 #div-1a { float:left; width:150px; } #div-1b { |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |