所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则,position使得设计者可以将HTML元素精确放置,position属性确定了每个元素框(box)定位的参考点。
在详细介绍之前,我们先简要的说明一下定位的4种方法:
1、静止定位(static):这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊说的。
2、绝对定位(absolute):这种方法允许用户指定元素的左上角、右下角或者其他的参考点和最近的父元素之间的关系将该元素从正常的文档流中拖出来。当页面滚动时,元素将保持它们各自的位置不变,随着页面一起滚动,就像粘在一起一样。
3、固定定位(fixed):这种方法允许元素相对于实际的浏览器窗口放置。
4、相对定位(relative):这方法定义相对于在默认情况下浏览器把它放置的位置。这个很难解释,可喜的是这个方法使用的很少。
静止定位static
定位的默认值static,不使用定位属性和使用这个值对页面没有什么效果的。
绝对定位absolute
当一个元素被绝对定位了,浏览器做的第一件事是把它从流中完全移走,接着放置在定位属性指定的位置上。看看下面的例子:
- #sidebar{
- position:absolute;
- top:100px;
- right:200px;
- width:280px;
- }
上面说了被绝对定位的元素从流中间移走了,所以在流中间的任何元素将不会受到影响,看见过网站上的小广告吧,后面的文字不会受其任何的影响,就是这样的效果!还有这里介绍的定位是指元素,对!是元素,也就是说你可以使用在任何的元素上(包括内联元素哦),当然更多的是使用在div上。
那如果我放置两个绝对定位的元素,谁会被遮挡住呢?这里需要介绍一个叫做z-index的属性,将这个属性设置的值越大,那个元素就会出现的上面。我们来看看边上的效果。我们将前面的元素设置z-index:99;
在绝对定位元素内嵌套的元素进行绝对定位会怎么样呢?这件事情是要说清楚的,不要说我们没有告诉你啊,它使用的绝对定位是相对于它的父级位置的,而不是整个页面的。
注意:个人认为不要使用绝对定位的方式去布局你的网站,因为网站的内容往往会根据你数据库内容的多少来显示,也就是说你不能完全确定网站的高度(还有一个原因不是确定高度是因为宽屏的电脑越来越多了)。而绝对定位以后你将不能应对这样的变化,比如你不能确定你的页脚放置在什么位置上合适。
固定定位fixed
固定定位指定元素的位置和你使用绝对定位基本相同,不过作用不同。它的位置是相对于浏览器窗口的,下面的那个div就是的,你滚动一下鼠标的滚轮看看就清楚了。
- #sidebar{
- position:fixed;
- top:300px;
- left:-90px;
- width:280px;
- }
注意:position:fixed;这个属性在IE6里面居然不兼容!现在使用IE6的可不少啊,那总不能就这样放任不管了吧,我提供了一个简单事例,大家可以看看通过Css hack是如何解决这个问题的。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>position:fixed in IE6 修正</title>
- <style type="text/css">
- <!--
- body{padding:0 10px;height:100%;
- font-size:12px;overflow-y:auto;}
- #leftMenu { background: #CCCCCC; height: 300px; width: 150px;
- position: fixed; left: 40px; top: 30px; border: 1px solid #666666; padding: 10px;
- letter-spacing: 0.2em; color:#990033;}
- #main{ background:#36F; margin-top:450px; margin-bottom:300px;
- float:right; padding:10px; color:#FFF;}
- * html{overflow-x:auto;overflow-y:hidden;}
- * html #leftMenu{position:absolute;}
- -->
- </style>
- </head>
- <body>
- <div id="leftMenu">
- <p>这是左侧的菜单,在标准的浏览器中采用固定定位,而非标准的浏览器(IE6)中,使用了一些HACK,和IE6本身的BUG!</p>
- <p>enjoy it!(这句英语帅不?)</p>
- </div>
- <div id="main">
- <p>这个是一个测试,IE6下position:fixed是不能使用的,但是我们使用一些技巧就能完美修复这个BUG!</p>
- <p>拖动页面右边滚动条,你可以看到,灰色的左菜单始终固定,这种现象不止于IE7、FireFox,在IE6下也有较为完美的表现~这个是一个测试,IE6下position:fixed是不能使用的,但是我们使用一些技巧就能完美修复这个BUG!</p>
- </div>
- </body>
- </html>
相对定位relative
这个方法使用的很少,可能大家都没有用过,或者别人使用了也看不出来。先来看看它的工作原理,相对定位的元素仍然是页面流的一部分,不同于绝对定位和固定定位。但是它在显现自身的最后一刻叛变了,它离开了自己的岗位,偏移到Css指定的位置上,原来的岗位呢?还给他留着呢!
谁逼迫它叛变的?我们使用的position:relative;和浏览器就是元凶!大家可以试试看,你指定的家伙是怎么叛变的,我就不做这个恶人了。
分享到:
相关推荐
资源中包含html+CSS+div的布局练习,其中包括固定布局、流式布局、浮动布局、定位布局等布局方式的练习Demo,另外还对CSS中的一些特殊的属性进行了练习,包括position、float、display等属性,对每一个属性和布局的...
第10章 理解CSS定位与div布局 10.1 div标记与span标记 10.1.1 概述 10.1.2 div与span的区别 10.2 盒子模型 10.2.1 盒子模型的概念 10.2.2 border 10.2.3 padding 10.2.4 margin 10.3 ...
如何学习DIV+CSS布局之position属性 如果用position属性来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute。定位(position)布局页面说容易非常容易,只需要记住这...
DIV+CSS 三栏布局实例代码,主要是用了position:absolute
嵌套DIV布局,会牵扯到CSS的position属性 如果内层DIV将position属性设置为absolute,并设置left,和top等属性,还需要考虑外层DIV的position属性设置。 absolute:absolute绝对定位,直接指定top、left、right、...
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲。对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位。 3.1.1 div是什么 div是XHTML...
定位布局 相对定位和绝对定位都是相对于父div标签的。 相对——以这个元素的本来应该在的位置为参照点 绝对——以父div标签的原点(左上角)为参照点。 由于外层是position:relative,所以里层是absolute的话,则会...
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。
让DIV重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现。 重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位(可重叠) 3、left ...
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置,上下为0(可以为任意)。 二、相对定位与负的边距 #wrap { position:relative; width:760px; left:50%; margin-left:-380px } 这段代码的意思...
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了。一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局。前者适合布局首页,因为首页上的内容往往可以...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局...
三栏布局:页面分为左中右三部分。左右固定,中间部分自适应。 1. 绝对定位法 这里的绝对定位是指对左右部分进行绝对定位。 HTML结构。 <div class=left>Left</div> <div class=main>Main</div> <div class=right>...
示例描述:本章演示用DIV布局。 div布局.html 演示div布局实例。 层嵌套.html 层嵌套的用法。 table布局.html 演示table布局。 DIV布局样式.html 设置DIV布局样式。 如何用DIV布局.html ...
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
首先还是那句老话,非常幸运我们现在可以使用CSS3布局。 在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直...
1.需要对网页进行设计,可以使用传统的div+css设计,里面的元素可以使用position定位,或者float定位,或者flex布局。 2.需要使用css3中的至少两种效果,并且用到css3的地方请注释,例如阴影效果,动画效果,2D转换...