转自:http://www.cnblogs.com/Jerry-Chou/archive/2011/11/02/2233094.html
1,static(默认)
当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方。所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果。
一般来说,我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。
2,relative(相对定位)
在static的基础上,如果我想让一个元素在他本来的位置做一些调整(位移),我们可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right)。
有一点需要注意的是,相对定位的元素仍然在文档流中,仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。
3,absolute(绝对定位)
如果你想在一个文档(Document)中将一个元素放至指定位置,你可以使用absolute来定位,将该元素的position设置为absolute,同时使用top,bottom,left,right来定位。
绝对定位会使元素从文档流中被删除,结果就是该元素原本占据的空间被其它元素所填充。
4,mix relative and absolute(混合相对定位和绝对定位)
如果对一个父元素设置relative,而对它的一个子元素设置absolute,如:
1
2
3
4
|
< div id = "parent" style = "position:relative" >
< div id = "child" style = "position:absolute" >
</ div >
</ div >
|
则子元素的绝对定位的参照物为父元素。
利用混合定位,我们可以用类似下面的css来实现两列(Two Column)定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
#div-parent { position : relative ;
} #div-child- right {
position : absolute ;
top : 0 ;
right : 0 ;
width : 200px ;
} #div-child- left {
position : absolute ;
top : 0 ;
left : 0 ;
width : 200px ;
} |
5, fixed(固定定位)
我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”,那么如果我想让一个元素定位的参照物总是整个文档(viewport),怎么办呢?
答案是使用fixed定位,fixed定位的参照物总是当前的文档。利用fixed定位,我们很容易让一个div定位在浏览器文档的左上,右上等方位。比如你想添加一个信息提示的div,并将该div固定在右上方,你可以使用以下css
1
|
.element { position : fixed ; top : 2% ; right : 2% ; }
|
6,float(浮动)
对于浮动,需要了解的是:
*浮动会将元素从文档流中删除,他的空间会被其它元素补上。
*浮动的参数物是父元素,是在父元素这个容器中飘。
*为了清除浮动造成的对浮动元素之后元素的影响,我们在浮动元素之后加一个div,并将这个div的clear设置为both。
*如果两个元素都设置了浮动,则两个元素并不会重叠,第一个元素占据一定空间,第二个元素紧跟其后。如果不想让第二个元素紧跟其后,可以对第二个浮动的元素使用clear。
7,reference
static | Elements renders in order, as they appear in the document flow. This is default. |
absolute | The element is positioned relative to its first positioned (not static) ancestor element |
fixed | The element is positioned relative to the browser window |
relative | The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position |
inherit | The value of the position property is inherited from the parent element |
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://davidwalsh.name/css-fixed-position
相关推荐
在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1、使用id定位: 复制代码代码如下: 锚点1</a> ”1F”> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 ...
JS获取网页中HTML元素的几种方法分析
css 3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位。 默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float 具体实例 复制代码代码如下: <html> &...
地理位置定位的几种方式:IP地址,GPS,Wifi,GSM/CDMA 地理位置获取流程: 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。 3、假设用户允许,...
如果是获取浏览器的滚动高度,各个浏览器有所差异,使用以下几种方式: Chrome: document.body.scrollTop Firefox: document.documentElement.scrollTop Safari: window.pageYOffset 我这里是局部元素滚动,...
本文以定位到第三个文本框为例为大家详细介绍下jquery 定位元素几种方法,感兴趣的朋友可以参考下,希望对大家有所帮助
在动态Web应用中,动态生成的HTML页面产生的缺陷难以定位并且会严重影响Web应用程序的可用性和稳定性。针对以上问题,提出了一种基于符号约束集的Web缺陷定位方法,通过对Web服务端程序的动态符号执行生成一个带有...
通过标签查找html对象,由于html标签在一个页面中可能重复很多次,所以当前页面返回的是一个数组。可以根据标签出现的位置定位元素的对象。所有浏览器都兼容。 document.getElementsByName(“hh”)[0]; 通过name属性...
文章目录一、float浮动二、position定位 今天来谈谈网页设计中的float定位和position定位,这两个在网页排版中是必不可少的操作,当然float其实用得更多。...常见的都有以下几种, 块级元素有 div、
button按钮的几种样式,主要是运用到CSS3移动属性以及定位来实现按钮的幽灵特效,代码优化及简单的响应式
基于上述两种原因,作者认为需要编写一本能够利用HTML5新技术开发移动Web应用的入门书籍,令广大读者在真正学习到HTML5新技术的同时,也能快速掌握移动Web开发的基础知识。 关于本书 本书不足之处在于,本书并没有...
4、style :定义 内联方式方式使用(CSS中) 4、注释 语法:<!-- --> 注意: 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C :Word Wide Web Consortium (万维网联盟) 1、HTML文档的...
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。...
JavaScript offsetParent案例详解 1. offsetParent定义:那么... 根据定义分别存在以下几种情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>
(3)索引文件[Index -- .hhk文件]:一些专业书籍在其后面一般有个索引表,利用已经排序的字母、单词、词组来帮助读者快速定位到需要的一个或几个位置。在 chm 中也可以使用索引。索引文件中就包含每个关键词...
<... 创新投入与创新效 率和吸收能力之间以及产品定位差异与各参数之间存在几种正相关与负相关函数关系, 揭示了水平差异产品内生溢 出和低成本创新的一些特点. </body></html>
现在总结一下控制锚点的几种情况: 1. 在同一页面中 <a></a><!-- 定义锚点 --> 跳转到add 2. 在不同页面中,锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点 跳转到a.add 3. 点击链接触发js...