基于HTML+CSS网页布局定位参数研究

梁艳玲

(山西旅游职业学院 计算机科学系，山西 太原 030031)

1 定位的概念

网页设计中，网页布局非常重要.网页布局常常使用的方法是盒子模型、浮动和定位.常规的页面元素在排列时会按照从上到下或者从左到右的顺序一一罗列，这种默认下的排列方式称之为文档流.但一般默认方式呈现网页设计相对单调，混乱.盒子模型是使用CSS控制页面元素外观和位置的基础.浮动是当元素脱离文档流后对元素进行布局调整，常常做左右布局.而遇到上下布局和叠加等情况时便可以使用定位来完成网页设计.

在正常的设计中，使用定位有很多种情况，且往往出现因参数不准确导致的布局混乱.现将定位的每个参数和属性进行验证研究.以准确把握定位的作用和使用.

2 定位的特点

网页布局实际上就是对网页对象的定位，定位方式不同，网页元素的实现与控制方法也不同.在Css中 position属性用于指定一个元素在文档中定位的方式.取值有static默认(没有任何定位，又称静态定位)；relative相对定位；absolute绝对定位；fixed固定定位；sticky，粘性定位.在设定了元素定位状态后，再根据具体位置设置属性值top、right、bottom、left的具体值来最终决定选中元素在网页排版中最终的布局位置.

3 实例验证定位属性值的特性

(1)验证relative相对定位[1]

案例1：设计三个尺寸为高度100px，宽度100px的网页区域 box1、box2、box3，颜色设定为红区、黄区、蓝区，对其进行页面布局，要求将黄色向右移动100px，再向下移动100px，即移动到蓝色右侧，页面其他元素布局不变.如图1

-------------------------------------

操作1：不使用定位属性值，利用盒模型完成布局要求.

第1步：#box2{width:100px;height：100px;background：yellow;margin-left：100px;}(如图2)

第2步：#box2{width:100px;height：100px;background：yellow; margin-left：100px;margin-top:100px;}(如图3)

运行后查看结果发现box2黄色区域下移后box3蓝色区域也被带下来了，并未实现题目要求，这就是边距带来的问题，当然浮动也无法实现.既然是边距的问题，因此可以设置box2黄色区域margin-top:-100px，box3蓝色区域便可以保持原先的布局.

第3步：#box3{width:100px;height：100px;background：blue;margin-top:-100px;}

如果按照这样的操作来实现上下布局，是很麻烦的，下面利用定位来实现位移的上下布局：

操作2：利用相对定位relative，增加偏移量.

第1步：#box2{width:100px;height：100px;background：yellow;position：relative;}

第2步：#box2{width:100px;height:100px;background:yellow;position:relative; left:100px;top:100px;} (如图4)这里注意：left:100px;与right:-100px是等价关系.

观察发现设置相对定位后，元素占文档流，红色box1和蓝色box3没有发生位移，box3没有占据空出来的区域，不影响其他元素布局，box2相对于自身进行偏移.即自身左上角(0 0)进行偏移.

总结relative特点：①如果没有定位偏移量，对元素本身没有任何影响；②不脱离文档流，不影响其他元素.

(2)验证absolute绝对定位[2]

案例二：建立两个一大一小区域box1(红)和box2(黄)，设定绝对定位.如图5所示.

#box1{width:100px;height：100px;background：red;}

#box2{width:200px;height:200px;background：yellow;}

-----------------

操作1：#box1{width:100px;height：100px;background：red;position：absolute;}

为box1添加绝对定位属性，运行后发现块元素box1添加绝对定位属性脱离文档流，box2“下沉”顶在页面左上角.(如图6).

案例三：创建内联元素，为其添加宽、高、背景色样式.如图7所示.

span{width:100px;height：100px;background：yellow;}

-----------------

操作1：span{width:100px;height：100px;background：yellow;position：absolute;}(如图8)

为内联元素span添加绝对定位属性，运行后如图8显示，原本不支持宽高的阴影区域，现在呈现出样式里设置的宽高参数设置，具备了块标签的特性.

案例四：创建块元素，不设置宽、高属性.运行如图9显示块元素的背景会默认与父元素同宽.

div{background:red;}

--------------

操作1：div{background:red;position：absolute;}

为块元素div添加绝对定位属性，运行结果看到div宽度由内容决定.如图10所示.与块元素默认属性有了区别.即块元素默认宽根据内容决定，使块具有内联元素的特性.

案例五：创建一个块标签，设置定位后，属性值用绝对定位，并添加偏移量左移100px，顶部距离100px，运行结果如图11所示，运行后，块标签参照浏览器发生偏移.代码如下.

div{background:red;position：absolute;left :100px;top：100px;}

--------------

操作1：将案例五修改为嵌套结构，box1嵌套box2，并为父容器box1设置宽、高、边框以及外边距.为子元素box2只设置宽、高以及背景颜色，用来区分父容器的区域和子元素本身.运行结果如图12所示.运行后看到box2方块会在父容器box1的左上角.

#box1{width：300px;height：300px ;border:1px solid black;margin：200px;}

#box2{width：100px;height：100px; background:red;}

-----------------

第1步：#box2{width：100px;height：100px; background:red;position：absolute;left：0;top:0;}

为box2添加绝对定位，并设置偏移量.运行后发现，红色方块移动到了浏览器的左上角，即HTML的左上角，相当于文档左上角.注意：0：0点以整个文档左上角起点作为参照.运行结果如图13所示.

第2步：box2{width：100px;height：100px; background:red;position：absolute;right: 0;top:0;}

第3步：#box2{width：100px;height：100px; background:red;position：absolute;right：0;bottom:0;}

分别对box2设置定位位置，经过验证，在组合的代码书写下，可以把红色方块依次渲染到左上角、右上角、右下角这几个位置，它的偏移跟自身没有关系，是针对整个文档偏移.如图14，图15所示.

第4步：为父元素box1添加相对定位，子元素box2保持定位属性和偏移量.

#box1{width：300px;height：300px ;border:1px solid black;margin：200px;position：relative;}

#box2{width：100px;height：100px; background:red;position：absolute;right：0;bottom:0;}

运行后发现：box2红色方块子元素的偏移为围绕父先元素偏移.位移坐标的 0、0点在父元素右下角.如图16所示.

第5步：修改子元素box2的偏移坐标.

#box1{width：300px;height：300px ;border:1px solid black;margin：200px;position：relative;}

#box2{width：100px;height：100px; background:red;position：absolute;left：0;top:0;}

运行结果如图17所示.偏移依然参照父元素进行，与整个文档无关.

在案例验证过程中父元素添加的relative相对定位，经过案例五验证：父元素添加相对定位、绝对定位、固定定位三种定位其中一种，子元素偏移都是按父(祖先)元素进行偏移，跟整文档无关.但如果子元素的所属父(祖先)元素都没有定位信息，那么子元素就会以整个文档坐标进行偏移.

经过论证：相对定位relative是相对于当前元素自身的定位，对自身进行偏移，而绝对定位absolute跟自身没有关系，它是针对父(祖先)元素或者整个文档进行偏移.

总结absolute特点：①使元素完全脱离文档流，使内联元素支持宽高(让内联具备块特性)，②使块元素默认宽根据内容决定(让块具有内联的特性)，③如果祖先元素定位，子元素相对于定位祖先元素发生偏移，④如果祖先元素未定位，子元素相对于整个文档发生偏移.

(3)验证fixed固定定位

案例六：创建案例：div加一个定位，给body加一个高度，让浏览器出现一个滚动条，方便确认div定位布局.运行结果如图18所示.

body{height：2000px;}

div {position:fixed;}

--------------

操作1：div {position:fixed;bottom:0;right：0;}

为div设置定位布局为文档右下角底部，如图19所示.运行后显示div添加定位属性后，移动滚动条内容“返回顶部”位移未发生改变.它被固定在容器设定的位置.用它可以制作很多“返回顶部”或者左右广告、弹窗等布局.

按照验证相对定位和绝对定位的方法，验证固定定位只针对浏览器文档进行偏移，在嵌套结构中也不会受祖先元素影响.

总结fixed特点：①使元素完全脱离文档流，②使内联元素支持宽高(让内联具备块的特性)，③使块元素默认宽根据内容决定(让块元素具备内联的特性)，④相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响.

(4)验证Sticky粘性定位.

案例七：创建一个多段文件，在其中一处添加一个div标签，并为div添加一个背景，再为body设置高度参数，使屏幕出现滚动条，运行后如图20所示，阴影部分为div标签内容所在位置.代码如下：

body{height:2000px ;}

div{background：red;}

---------------------

aaaaaaaa

……(多行)

bbbbbbbb

……(多行)

操作1：div{background：red;position：sticky;}

为元素div添加粘性定位属性，未赋值，运行结果正常，阴影区域随滚动条正常显现.

操作2： div{background：red;position：sticky;top：50px;}

top:50px;就是等div达到50px高度是粘于此处.运行后如图21显示.

总结sticky特点：指定位置进行粘性操作.

(5)验证Z-index定位层级

案例八：创建两个盒模型：box1和box2，分别设置宽、高及背景颜色，并添加定位属性和偏移位移量，运行后如图22所示，由于后写box2样式优先级高,所以红色box2在上方.创建时默认层级值为0，验证：嵌套的时候的层级问题.

#box1{width：100px;height：100px ;background:yellow;position：absolute;}

#box2{width：100px;height：100px; background:red;position:absolute;left：50;top:50;}

---------------

操作1：为box1添加定位层级，默认是0值，(注意：值越高级别越高，值也可是负值.)为box2添加级别为-1，运行后box1调整为box2上方.如图23所示.代码如下：

#box1{width：100px;height：100px ;background：red;position：absolute;z-index:0;}

#box2{width：100px;height：100px; background:blue;position:absolute;left：50;top:50;z-index:-1;}

案例九：验证嵌套的结构下定位层级问题.

创建父元素parten，以及子元素box1，与父元素同级元素box2，为它们添加样式如下：

#parent{width：100px;height：100px;border：5px black solid;}

#box1{width：100px;height：100px ;background:yellow;position：absolute;z-index:0;}

#box2{width：100px;height：100px; background:red;position:absolute;left：50px;top:50px;z-index:-1;}

--------------------------

运行后结果如图24显示，box1层级高于box2，因此显示在box2上方.

操作1：parent{width：100px;height：100px;border：5px black solid;position：absolute;z-index：-2;}

将父元素层级调低为-2，运行结果如图25，box1受父元素层级定位影响层级未能体现层级， box2与parent同一级别进行比较，box1为子元素层级再高也无意义.如果parent不写层级数值，box1与box2直接按层级赋值显示.即嵌套元素分别加定位属性时，若父容器的定位级别低，子元素的层级高，按父元素级别体现.

总结z-index特点：数值调整嵌套层级.

4 定位在页面中应用实例[3]

网页设计中常采用图片截图的方式美化列表标签样式，这种方法相对麻烦，本案例采用添加伪类，利用定位布局，智能简洁的为列表添加方块彩色列表标签.

内容代码及实例演示图样式部分结构部分

项目标签美化

• 测试文字
• 测试文字
• 测试文字