网页07定位.ppt

1、定位,定位概念定位属性定位类型相对定位绝对定位,广义的定位：将网页元素放到页面中的某个位置，即网页排版中的定位操作。狭义的定位：CSS中的属性position，只不过使用CSS定位并不仅仅通过这个属性来实现。,定位概念,position属性,static这是默认的属性值，也就是该盒子的按照标准（包括浮动方式）进行布局。relative称为相对定位使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。,position属性,absolute绝对定位，盒子的位置以它的包含框为基准进行偏移。

2、绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。fixed称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。,静态定位（static）,表示块保持在原本应该在的位置上，即该值没有任何移动的效果。,Box-1,bodymargin:20px;font:Arial12px;#fatherbackground-color:#a0c8ff;border:1pxdashed#000000;padding:15px;#block1background-color:#fff0a

3、c;border:1pxdashed#000000;padding:10px;,文档结构与样式如下所示,二、相对定位,使用相对定位，除了将position属性值设置为relative之外，还需要指定一定的偏移量。水平方向通过left或right属性来指定，竖直方向通过top和bottom来指定。,1、一个子块的情况,在#block1中将position属性设置为relative，并设置偏移距离，代码如下：#block1background-color:#fff0ac;border:1pxdashed#000000;padding:10px;position:relative;/*relativ

4、e相对定位*/left:30px;top:30px;,效果如下图所示,可以看出，它向右和向下分别移动了30像素“left:30px”的作用就是使Box-1的新位置在它原来位置的左边框右侧30像素的地方。“top:30px”的作用就是使Box-1的新位置在原来位置的上边框下侧30像素的地方。,两个子块的情况,将上面的页面加以改造，在父div中放两个div。效果如下：,结构和样式为:,Box-1Box-2,bodymargin:20px;font-family:Arial;font-size:12px;#fatherbackground-color:#a0c8ff;border:1pxdashed

5、#000000;padding:15px;#fatherdivbackground-color:#fff0ac;border:1pxdashed#000000;padding:10px;,将子块1的position属性设置成relative，代码为：#block1position:relative;bottom:30px;right:30px;,子块2还没有设置任何与定位相关的属性。此时的效果如图所示可以看到子块1的位置以自身为基准向上和向左各偏移了30像素而子块2和原来的位置相比没有任何变化。,如果同时设置两个子块的position属性都为relative，即将子块2加上相对定位属性，#bl

6、ock2position:relative;top:30px;left:30px;则效果如图所示：,相对定位原则,1）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置2）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。需要指出的是，上面的实验是针对标准流方式进行的，实际上，对浮动的盒子使用相对定位也是一样的。,绝对定位,准备网页，效果如图所示,结构和样式为:,Box-1Box-2Box-3,bodymargin:20px;font-family:Arial;font-size:12px;#fatherbackground-color:#a0c8ff;

7、border:1pxdashed#000000;padding:15px;#fatherdivbackground-color:#fff0ac;border:1pxdashed#000000;padding:10px;,将Box-2的position属性改为absolute，效果如图所示这时以浏览器窗口作为定位基准。此外，该盒子彻底脱离标准流，Box-3会紧贴Box-1，就好像没有Box-2这个盒子存在一样。代码为：,#block2position:absolute;top:0px;right:0px;,然而不是所有的绝对定位都以浏览器为基准来定位，接下来对上面的代码做一处修改，为父div增加

8、一个定位样式#fatherbackground-color:#a0c8ff;border:1pxdashed#000000;padding:15px;position:relative;,这时效果就变化了，如图所示。偏移距离没有变化，但是偏移的基准不再是浏览器窗口，而是它的父div。,绝对定位的原则,1）使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。,2）绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。,所谓“已经定位”元素的含义：posi

9、tion属性被设置并且被设置为不是static的任意一种方式那么该元素就被称作是“已经定位”的元素。,关于“祖先”元素：即包含该元素的所有容器元素。结合“DOM”树更容易理解。即从该元素节点开始，走到根节点，经过的所有节点都是它的祖先。,关于“最近”：在一个节点的所有祖先节点中，找出所有“已经定位”的元素其中距离该节点最近的一个节点父亲比祖父近，祖父比曾祖父近以此类推，“最近”的就是要找的定位基准,在这个实例中，在父div没有设置position属性时，Box-2这个div的所有祖先都不符合“已经定位”的要求，因此它会以浏览器窗口为基准来定位。而当父div将position属性设置为relative以后，它