[计算机]网页07定位.ppt

定位 定位概念 定位属性 定位类型 相对定位 绝对定位 定位概念 广义的定位： 将网页元素放到页面中的某个位置，即网页排版中的定位操作。 狭义的定位： CSS中的属性position，只不过使用CSS定位并不仅仅通过这个属性来实现。 position属性 static 这是默认的属性值，也就是该盒子的按照标准（包括浮动方式）进行布局。 relative 称为相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。 相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 position属性 absolute 绝对定位，盒子的位置以它的包含框为基准进行偏移。 绝对定位的盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。 fixed 称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。 静态定位（static） 表示块保持在原本应该在的位置上，即该值没有任何移动的效果。 文档结构与样式如下所示 body div id=father div id=block1Box-1div /div /body 二、相对定位 使用相对定位，除了将position属性值设置为relative之外，还需要指定一定的偏移量。 水平方向通过left或right属性来指定，竖直方向通过top和bottom来指定。 1、一个子块的情况 在#block1中将position属性设置为relative，并设置偏移距离，代码如下： #block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:relative; /* relative相对定位 */ left:30px; top:30px; } 效果如下图所示 可以看出，它向右和向下分别移动了30像素 “left:30px”的作用就是使Box-1的新位置在它原来位置的左边框右侧30像素的地方。 “top:30px”的作用就是使Box-1的新位置在原来位置的上边框下侧30像素的地方。 两个子块的情况 将上面的页面加以改造，在父div中放两个div。效果如下： 结构和样式为: body div id=father div id=block1Box-1/div div id=block2Box-2/div /div /body body{ margin:20px; font-family:Arial; font-size:12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #father div{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; } 将子块1的position属性设置成relative，代码为： #block1{ position:relative; bottom:30px; right:30px; } 子块2还没有设置任何与定位相关的属性。 此时的效果如图所示 可以看到子块1的位置以自身为基准向上和向左各偏移了30像素 而子块2和原来的位置相比没有任何变化。 如果同时设置两个子块的position属性都为relative，即将子块2加上相对定位属性， #block2{ position:relative; top:30px; left:30px; } 则效果如图所示： 相对定位原则 1）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置 2）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。 需要指出的是，上面的实验是针对标准流方式进行的，实际上，对浮动的盒子使用相对定位也是一样的。 绝对定位 准备网页，效果如图所示 结构和样式为: body div id=father div Box-1/div div id=block2Box-2/div div Box-3/div /div /body body{ margin:20px; font-family:Arial; font-size:12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; }