来谈谈：CSS教程:实例解说定位Position
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。网页制造poluoluo文章简介：一切元素的默许定位都是：position:static，这意味着元素没有被定位，并且在文档中呈现在它应当在的地位。
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;}
网页制造poluoluo文章简介：一切元素的默许定位都是：position:static，这意味着元素没有被定位，并且在文档中呈现在它应当在的地位。
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.浮动列
假如我们把一个元素向左浮动，而且把第二个元素也向左浮动，theywillpushupagainsteachother。
#div-1a{float:left;width:150px;}#div-1b{float:left;width:150px;}
9.扫除浮动列
在浮动元素以后，我们能够扫除浮动来使其他元素准确定位。
#div-1a{float:left;width:190px;}#div-1b{float:left;width:190px;}#div-1c{clear:both;}
糖伴西红柿说：固然我一向用浮动结构，可是把握好position也是必需的，实在也没那末难的。。。
原文来自典范的：LearnCSSPositioninginTenSteps
每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。
页:
[1]