本节继续讲解css层叠样式表的应用：行内插入样式。
在制作网页时，常常要用到css的相对定位样式与绝对定位样式。
在用css控制网页排版过程中，定位一直被人认为是一个难点，这主要表现为很多朋友在没有理解清楚定位的原理时，制作出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能，做出一些很酷的网页效果来。
应用css的定位样式，我们可以把一些内容移动它们的位置，还可以把这些内容覆盖到其它内容的上层。
css的定位样式，一般应用在“块级元素”中。例如：段落标签、块区标签、图片标签、移动标签、表格标签、多媒体标签等等标签中。
一、css相对定位样式举例：
style="LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px"
“相对定位”是指相对于它“本身”的位置而言的。应用“相对定位样式”中的“居左值”与“居上值”，我们可以移动“要定位内容”的位置，把它们放置到我们需要的位置上去。在这里，我们首先应该弄清楚，要定位内容的“本身位置”。
举例如下：
代码1：
这是由一个图片组成的网页。这个图片没有定位。你把代码“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑页面”中，“发表”以后观察一下其显示效果，认识一下它“本身的位置”。
效果：“图片的左上角”是与“网页主体页面的左上角”重合的。也就是说，图片是从这一点向右和向下平铺的。这一点，就是相对定位的“插入点”，也叫做相对定位的“参考点”。
在上面的图片标签中我们添加一个css相对定位样式：
style="LEFT: 20px; WIDTH: 940px; POSITION: relative; TOP: 50px"
代码如下：
再观察一下显示效果，图片不在它本身的位置上啦！图片向右移动了20px，向下移动了50px。(网页中，图片的上方有一条横线，你可从“图片与横线”的位置关系观察其变化。添加了上面的相对定位代码以后，比它“本身的位置”下移了50px，右移了20px。)
再观察一下下面的代码效果：
上面的代码是把图片放入了一个“居中对齐”的块区中。图片的位置就移动到页面中间啦，他“本身的位置”就发生变化啦！
也就是说，我们要设置定位代码的那些内容（例如上面的图片），其“本身的位置”，在每篇网页中是不相同的。没有设置定位代码时的显示效果，就是它们本身的位置。也可以理解为：设置了相对定位代码的居左值与居上值都为0px时的显示效果，就是它们本身的位置。
二、css的绝对定位样式举例：
style="LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px"
css“绝对定位”，是指“相对于其最接近的一个有定位设置的父级对象”进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML的定位规则，依据“body对象左上角”作为参考进行定位。我们可以应用“绝对定位样式”中的“居左值”与“居上值”移动其位置。绝对定位对象可层叠。“body对象的左上角”就是“浏览器窗口的左上角”。
在这里，应该弄清楚“父级对象”这个概念。所谓“父级对象”，是指你要定位的这个元素外层的那个标签。
代码举例：
上面的代码中，段落标签中设置了css绝对定位样式，段落标签的外层是一个块区标签。块区标签包裹着、控制着段落标签。这个块区标签就是段落标签的“父级对象”。
由于块区标签中没有设置css定位样式，所以，段落标签中绝对定位样式的插入点是“body对象的左上角”，也就是“浏览器窗口的左上角”。
我们再看看下面的代码：
上面的代码中，由于块区标签中设置了css相对定位样式，所以，段落标签中绝对定位样式的插入点就是这个块区的左上角了。
在这里我要指出的是，“定位插入点”（也叫“参考点”），按照理论上讲，应该在“body对象的左上角”，也就是“浏览器窗口的左上角”。但是，各个网站设置的“定位插入点”的位置是不尽相同的。例如360doc个人图书馆，以前，它们把“定位插入点”设置为“body对象的左上角”。现在呢，它们修改了服务器中的数据啦，把“定位插入点”下移啦。在浏览网页的页面中，“修改”按钮的下面，我们可以看到一条横线，那条横线的左端，就是“定位插入点”。据馆方讲，是因为有一些不大懂代码的朋友们，在他们制作的网页中，应用css定位代码不当，遮蔽了“修改”按钮，无法“修改”网页啦。为了让朋友们修改网页时方便，所以将“定位插入点”下移啦。
目前，360doc个人图书馆的“定位插入点”，在网页中是定位在“修改”按钮下面那条横线的左端；在我们各自的个人图书馆首页，是定位在“左栏左端”垂直向上大约280px的那一点上。
也许有的朋友会问：“body对象”是什么呢？浏览器窗口在什么地方啊？
“body对象”是指网页的主体，也就是浏览器窗口。换句话来讲，就是我们浏览网页时，拖动竖向滚动条能够上下移动的那些网页部分。
三、小结：
综上所述，css定位样式，常用的有相对定位与绝对定位两种。
应用相对定位与绝对定位，都能够把网页内容移动其位置。
相对定位的定位参考点是其“本身”，绝对定位的参考点是其“父级对象”。
相对定位的定位参考点，不是一成不变的。可以是浏览器的窗口，也可以是网页的其它位置。要具体网页具体分析。
绝对定位的参考点是其“父级对象”。如果其“父级对象”没有设置定位样式，那么，绝对定位的参考点就是浏览器窗口。
相对定位是“自私”的。应用相对定位代码，移动了某个网页内容的位置，但是，它本身的位置还是保留着的，其它网页内容占据不了这个位置。
绝对定位是“奉献”的。应用绝对定位代码，移动了某个网页内容的位置。这个网页内容原来的位置，别的网页内容就占据啦。
相对定位的内容，没有脱离“文本流”，因此不能层叠；绝对定位的内容，已经脱离了“文本流”，悬浮起来了，因此可以层叠。
谈到相对定位与绝对定位，在百度中搜索到的答案中，往往会看到“文本流”与“层叠”等等词语，使许多觉得很费解。
什么是“文本流”？
我们可以这样通俗地理解：“文本流”就是我们看到的网页内容。
网页中的内容，在没有应用相对定位或者绝对定位的时候，它是在“文本流”中的。应用了“相对定位”以后，它还是在“文本流”中的，并没有脱离“文本流”。但是，应用绝对定位就不一样了。网页中的某个内容，一旦应用了“绝对定位”，就脱离“文本流”了。它的位置，已经让给别的网页内容了，就好像是从网页内容中拿出来了。然后，根据绝对定位样式中设置的“居左值”与“居右值”指定的位置，覆盖到其它网页内容的上方。
什么是“层叠”？
层叠”二字，顾名思义，就是几层“重叠”在一起的意思。
“相对定位”，因为没有脱离“文本流”，也就是从网页中取不出来，所以不能重叠。而“绝对定位”，能够从网页中取出来，覆盖到其它内容的上方，所以能够重叠。
四、css定位代码应用：
在制作网页时，常常会用到css定位代码。常见的应用方式是：把“相对定位”代码设置到网页的容器中（例如：表格、块区、段落。），用于固定容器的位置。把“绝对定位”代码设置到网页的某些内容中，使这些内容覆盖到另一些内容上面，从而制作出特效网页效果。
举例1：
上面的网页，是我制作的一件作品，在小挂件中添加了移动文字。
制作方法简析：
在表格标签中设置css相对定位样式，用于固定表格容器且控制表格中的内容；单元格中放入小挂件的图片；在块区标签中设置css绝对定位样式，用于控制移动标签与移动标签中的内容。
举例2：
上面的网页，是我制作的一件作品，在动画图片中添加了移动文字。
制作方法简析：
在表格标签中设置css相对定位样式，用于固定表格容器且控制表格中的内容；单元格中放入动画图片；在移动标签中设置css绝对定位样式，用于控制移动文字。
应用这种制作方法，解决了“动画图片”不能做“背景图片”的问题，从而制作出一种漂亮的网页效果来。
举例3：
这是我制作的一件作品，在图片中任意位置添加文字的实例。
制作方法简析：
在表格标签中设置css相对定位样式，用于固定表格容器且控制表格中的内容；单元格中放入图片；在每一个设置了css绝对定位样式的块区内，放置了一个文字。用绝对定位的“居左值”与“居上值”调整文字的位置。
举例4：
这是我用css定位代码制作的一个相册作品。
制作方法简析：
在表格标签中设置css相对定位样式，用于固定表格容器且控制表格中的内容；移动标签中放入若干个相片；用css绝对定位样式把相框图片覆盖到移动屏幕上。
举例5：
这是我与“震宇”朋友破解了“百荷音画驿站”加密代码，收藏过来的一幅大幅音画。
制作方法简析：
在10行二列的表格标签中设置了css相对定位样式，用于固定表格容器且控制表格中的内容；每一行的单元格中放入了一幅切割图片；最后，另起一行，合并单元格，放入了有绝对定位样式的15幅动画图片与一个播放器。
五、css定位样式中的“居左值”与“居上值”：
在css定位样式中，“居左值”与“居上值”的应用非常重要，必须弄清楚。
居左值取正数，是向右移动；居左值取负数，是向左移动。
居上值取正数，是向下移动；居上值取负数，是向上移动。
如果用css绝对定位样式定位“网页内容”时，“居上值”取负数，那么，“网页容器”中相对定位样式的居上值应该取其“相反数”。不然的话，就会遮蔽网页上方的“修改”按钮，给你修改此篇网页带来不便。
六、附注：
这篇《教程》，非常重要。一定要认真学习，反复学习，努力把css定位样式弄明白，会应用。
作业：
一、css定位样式有何作用？
二、css定位样式应用在哪些地方？
三、什么是文本流？什么是层叠？
四、为什么相对定位不能层叠？为什么绝对定位能够层叠？
五、填空：
1、“相对定位”是指相对于它（）的位置而言的。其（本身）的位置，在每篇网页中是不相同的。没有（）时的显示效果，就是它们本身的位置。
2、css“绝对定位”，是指（）进行绝对定位，如果对象的（）没有设置定位属性，即还是遵循（）规则，依据（）作为参考进行定位。
3、定位的“父级对象”，是指（）。
4、、目前，360doc个人图书馆的“定位插入点”，在网页中是定位在（）；在我们各自的个人图书馆首页，是定位在（）。
5、css定位样式常见的应用方式是：把“相对定位”代码设置到（）中，把“绝对定位”代码设置到（）中。
6、在css定位样式中，居左值取正数，是向（）移动；居左值取负数，是向（）移动；居上值取正数，是向（）移动；居上值取负数，是向（）移动。
7、用css绝对定位样式定位“网页内容”时，如果“居上值”取负数，那么，“网页容器”中相对定位样式的居上值应该取其（）。不然的话，就会遮蔽网页上方的（）按钮，给你修改此篇网页带来（）。
“春天没来”编撰
2014年6月18日于北京 |
||||||||||||||
|
|
