《CSS教程之定位》由会员分享，可在线阅读，更多相关《CSS教程之定位（12页珍藏版）》请在金锄头文库上搜索。
1、CSS之定位总体介绍下：CSS有3中定位机制，普通流【各元素按照HTML文档的顺序依次显示】，浮动，绝对定位。1. 相对定位position = relative.顾名思义：相对与自己定位。相对定位，元素设置left,top,bottom,right会相对与自己原来的位置，移动自己的位置。不管是否移动，它所占据的空间仍然是原来的空间【一定占据了原来的空间】。移动元素可能会覆盖其他的元素。2. 绝对定位 position = absolute.定位相对于它的祖先定位。仔细观察上图，定位是你根据它的祖先，不是它原来的位置。祖先：包含绝对定位元素的最近一层设置position:relative；po
2、sition:absolute的元素；没有就根据文档定位，完全脱离文档流，不占据一点空间【相对定位是占据空间的】，所以可以设置z-index【这个属性知道用处吧】属性。由于相对定位和绝对定位配合使用，用处太大，写几个例子给你看看。帮助理解的小例子：例子1：/*效果图*/以前是不是想在导航条某个位置显示下时间。Now you can do it !/*/ 2013-07-26 /*/ #nav width: 60%; height: 50px; border: 1px solid red; position: relative; #nav #date height: 20px; border:
3、solid 1px #ccc; position: absolute; right: 3px; bottom: 3px; 例子2：/*效果图*/*/ 用户信息 Username: password: email: the emails format incorrect ! 会不会觉得使用fieldset，legend，label很奇怪，建议在没有很好的方法前，你的所有的表单模仿上面的代码。不想要fileld那个框，可以这么写用户信息，fieldsetborder:none;/*/ form width: 30em; form div position: relative; padding: 0
4、.4em 0; form div label display: block; width: 8em; float: left; form div input width:10em; form div em position: absolute; left: 18em; padding-left: 12px; background: url(imgs/error.png) no-repeat left top; /*/3. 固定定位：绝对定位的一种特殊情况，特点与绝对定位一样，只不过永远显示在视图的固定位置【IE6及以下版本不兼容此属性，问题不大，不常用且不兼容不会产生布局位图】4. 浮动flo
5、at浮动的框可以自由移动，它的外边缘遇到其包含框或者另一个浮动框边缘。上图框1把框2就给挡住了。Ok.睡了一觉，继续。上面四幅图需要再次强调设置了浮动定位的框，会向左或者右浮动，但是只有遇到包含框，或者另一个浮动框才会停下来。仔细看一下，嗯，l 只有遇到包含框也就说不会超过包含框这对布局很有利，最起码不会乱跑，肯定在包含框内部【对包含框没特许要求，绝对定位有】。l 或者另一个浮动框也就是说，你需要一个浮动框向左浮动停在另一个框旁边时，需要保证停靠框也就浮动的。1) 文字环绕图片/*效果图*/*/*/嗯，看了上面的例子，是不是觉得这例子能拿出手了。嗯，看html代码，很简洁也很明确的划分的新闻的
6、要素，例如需要一个标题，一张图片，一段介绍。2) 好了，学完了浮动地位，相对地位，绝对定位。你已经可以设计任何页面了。假设我需要一个类似这样的页面。【很常见的页面】我会给你剖析上面的页面，不要觉得简单，仔细看。/*/*/看完上面的例子，你可能觉得自己能，但是别这么想，自己试试。你可能会发现什么。下面一节将介绍为什么overflow:hideen会出现这么频繁。3) 浮动带来的问题/*/预期：#one的盒子里面包含一个.c的盒子/*/实际情况，#one的盒子并没有包住，而是感没有东西。嗯因为里面的盒子是浮动的，所以影响了正常布局。/*/解决方案：l Overflow:hidden【父容器添加ov
7、erflow:hidden，这并不是完美的解决方案，因为overflow主要用于设置当子元素内容超出父元素是显示滚动条还是隐藏。当子元素内容超出父元素范围时设置此元素就会隐藏某些子元素（当然如果你子元素设置了正确尺寸，那就没问题）。】l 在父元素上添加float属性，也会显示正确，但是父元素设置成浮动又可能会带来一些问题，也需要注意。l 添加专门用于清除浮动的元素嗯以上几种方法，除了第二种我觉得可能会引发不可思议的事情，其他的方案都是不错的选择。现在你应该明白，在上面那个主内容分两栏的页面，他们的父div为啥会有overflow这个属性了吧。如果没有的话，父元素觉得他是空的，导航和页脚就碰到一起了，因为他们感觉不要浮动元素【专业话讲：设置了元素浮动他们就脱离了文档流】。总结：l 学完了布局，你现在要能做到布局任何页面，水平放置的盒子肯定是使用了float，具体到小模块，绝对定位与相对定位可以帮你随心所欲的定位。l 一定要知道浮动元素对于父元素的影响，以及如何解决这种影响。l 教程中clear属性貌似是丢了，用于清除浮动，可以查下w3c。l 强调一下，记得试验所有出现的例子，以及在看的过程中出现的想法。2013年7月26日 17:40:36
