详细讲解CSS定位与定位应用

css

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。

定位的定义

在CSS中关于定位的内容是:position:relative | absolute | static | fixed

static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed 固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

CSS中定位的层叠分级:z-index: auto | namber;

auto 遵从其父对象的定位
namber  无单位的整数值。可为负数

定位的原理:

可以位移的元素 (相对定位)

在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分使用。)针对一个相对定位的元素所产生的。我们看下面的图:

我们看图中是一个宽度为200px,高度为50px,margin:25px; border:25px solid #333; padding:25px; 相对定位的元素,并且位移距上50px,距左50px。而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分,这说明:“当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值,但是在 Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后,表现内容已经脱离了文本流,只是在本文流中还为原来的绝对定位留下了原有的总宽与总高(内容的高度或是宽度加上margin\border\padding的数值)。这说明在相对定位中,虽然表现区脱离了原来的文本流,但是在文本流中还还有此相对定位的老窩。这点要特别注意因为在实际应用中,如果相对定位的位移数值过大,那么原有的区域就会形成一块空白。

并且我们注意,定位元素的坐标点是在margin值的左上边缘点,即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值时位移的方向是内聚的,由些可推,当TRBL为负值时位移的方向是外放的。在图片有位移的箭头指向标识,带有加号的是正值位移方向,带有减号的是负值位移方向。关于位移方位,可以延伸阅读怿飞的《由浅入深漫谈margin属性(一)》

可以在任意一个位置的元素 (绝对定位)

如上所述:相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不应他的移动而改变。但是这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位,绝对定位不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位,这就好比是一个工厂里的工人,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。看下图:

上图可知,文本流中的内容会顶替绝对定位无素的位置,一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中,定位元素将会跑到网页的左上角,因为那里是他们的被绝对定位后的坐标原点。

被关联的绝对定位

上面说的是单纯的绝对定位,而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性,但是又希望绝对定位的坐标原点可以固定在网页中的某一个点,当这个点被移动时绝对位定元素希望能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动,而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位。那么绝对定位的坐标就会以父级为坐标起始点。

虽然是如此,但是这个坐标原点却并不是父级的坐标原点,这是一个很奇怪的坐标位置。我们看一下模型图示:

我们看到,这个图中父级为黑灰色区块,子级为青色区块。父级是相对定位,子级是绝对定位。子级设置了顶部位移50个像素,左倾位移50个像素。那么我们看,子级的坐标原点并不是从父级的坐标原点位移50个像素,而是从父级块的padding左上边缘点为坐标起始点。而父级这里如果要产生位置移动,或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。

这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话,相信看完对这里对定位的解释一定可以把定位使用得随心所欲。

总在视线里的元素 (固定定位)

由于广告的溢用,使得一些浏览器软件都开始有了广告内容拦截,使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed; 他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。

虽然原来的浏览器并不支持过个属性,但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果(目前无法使IE5.x)实现这种效果。为了不使本文变成冗长的大论这里只给出这个实例算是这篇文章的结束。关于这个实例的一些问题大家可以自行分析。有不理解的地方可以给我留言!

定位应用

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="Design Corp" content="jonmax.com" /> <meta name="Designer mail" content="maozhenzhi(at)gmail.com" /> <meta name="roots" content="jonmax.com" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title></title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" rev="stylesheet" type="text/css" media="print" href="jonStyle/css/print.css" /> <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master.css" /> <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master_color.css" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="/rsd.xml" /> <link rel="start" href="" title="Home" /> <style type="text/css"> /*<![CDATA[*/body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto;}#menu {right:0; top:0; width:130px; position:fixed; padding:10px; text-align:center; font-weight:bold; background:#000;}* html #menu {position:absolute; right:16px;}/*only for ie*/html {overflow:auto !important; overflow:hidden;} /*]]>*/ </style></head><!-- --><body id="" class=""><div id="menu"><a href="#" title="Dummy menu item">Mozilla</a><a href="#" title="Dummy menu item">Opera</a><a href="#" title="Dummy menu item">Netscape</a><a href="#bites" title="Dummy menu item">Firefox</a><a href="#" title="Dummy menu item">IE6</a><a href="#" title="Dummy menu item">Windows</a><a href="#" title="Dummy menu item">Style</a><a href="#" title="Dummy menu item">CSS</a></div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div><div>看右上角的内容,不论浏览器怎么滚动,它始终在那个地方!</div></body></html>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2024-12-27 21:45:14

详细讲解CSS定位与定位应用的相关文章

网页标准学习之详细讲解CSS网页页面布局

css|标准|网页|页面 用CSS 来布局很容易.如果你已经习惯用表格布局的话,起先会感觉比较困难.其实不难,只不过动机不同,并且在实践中更有意义. 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块.你可以绝对或相对地用彼块取代此块. 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定). static值是元素的默认值,它会按照普通顺序生成,就如它们在HTML的出现一般. relativ

详细讲解CSS特殊选择符伪类的应用技巧

css|技巧 伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果. 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class):selector:pseudo-class {property: value}(选择符:伪类 {属性: 值})伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式. 类选择符及

网页制作知识之详细讲解CSS选择符

css|网页 一.选择符模式 模式/含义/内容描述 * 匹配任意元素.(通用选择器) E 匹配任意元素 E (例如一个类型为 E 的元素).(类型选择器) E F 匹配元素 E 的任意后代元素 F .(后代选择器) E > F 匹配元素 E 的任意子元素 F .(子选择器) E:first-child 当元素 E 是它的父元素中的第一个子元素时,匹配元素 E .(:first-child 伪类) E:link E:visited 如果 E 是一个目标还没有访问过(:link)或者已经访问过(:v

详细讲解CSS规范化命名的三种通用命名规则

css|规范|规范化 我们在webjx.com以前的文章中,曾经多次提到CSS命名的问题,有些朋友依然不够重视这些问题.认为这个问题对于CSS网页布局开发是无关紧要的.自己写的样式,自己心中有数就可以了.想要修改样式可以根据自己的记忆或个人的编码习惯很快的找到样式定义在文件中的位置.下面是我们以前介绍的关于CSS命名的文章: 但是,如果我们过几个月,过几年再修改现在所编写的文章,你的记忆还会那么清晰吗?如果你的个人习惯仅是一时的规则,长时间以后,或许对你自己来说,那些奇怪的名字也变的难以理解了.

详细讲解CSS中alt和title属性的困惑

css 浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆.例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器. 替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的.相反地,title属性才应该用来为元素提供额外说明信息.这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染ti

详解css定位与定位应用

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是:position:relative | absolute | static | fixed static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-

详解网页设计中的定位与定位应用

设计|网页|网页设计|详解 定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是:position:relative | absolute | static | fixed static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级.relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,righ

Java基础:JVM(Java 虚拟机)的详细讲解

可能有很多学习Java的朋友还不知道Java的运行原理.Java虚拟机是怎么工作的,本文将为你详细讲解(JVM)Java 虚拟机. 在Java中引入了虚拟机的概念,即在机器和编译程序之间加入了一层抽象的虚拟的机器.这台虚拟的机器在任何平台上都提供给编译程序一个的共同的接口.编译程序只需要面向虚拟机,生成虚拟机能够理解的代码,然后由解释器来将虚拟机代码转换为特定系统的机器码执行.在Java中,这种供虚拟机理解的代码叫做字节码(ByteCode),它不面向任何特定的处理器,只面向虚拟机.每一种平台的

实例详细讲解ASP教程之ASP中使用变量的方法

变量|教程 变量用于存储信息. 假如在子程序之外声明变量,那么这个变量可被ASP文件中的任何脚本改变.假如在子程序中声明变量,那么当子程序每次执行时,它才会被创建和撤销 实例: 声明变量 变量用于存储信息.本例演示如何声明变量,为变量赋值,并在程序中使用这个变量 <html><body><%dim namename="Donald Duck"response.write("My name is: " & name)%>&l