《网页07定位.ppt》由会员分享，可在线阅读，更多相关《网页07定位.ppt（30页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、定位定位定位概念定位概念定位属性定位属性定位类型定位类型相对定位相对定位绝对定位绝对定位广义的定位：广义的定位：将网页元素放到页面中的某个位置，即将网页元素放到页面中的某个位置，即将网页元素放到页面中的某个位置，即将网页元素放到页面中的某个位置，即网页排网页排网页排网页排版中的定位版中的定位版中的定位版中的定位操作。操作。操作。操作。狭义的定位：狭义的定位：CSSCSS中的中的中的中的属性属性属性属性positionposition，只不过使用，只不过使用，只不过使用，只不过使用CSSCSS定位并不定位并不定位并不定位并不仅仅通过这个属性来实现。仅仅通过这个属性来实现。仅仅通过这个属性来实现。
2、仅仅通过这个属性来实现。定位概念定位概念position属性属性static这是这是这是这是默认的属性值默认的属性值默认的属性值默认的属性值，也就是该盒子的按照标准，也就是该盒子的按照标准，也就是该盒子的按照标准，也就是该盒子的按照标准（包括浮动方式）进行布局。（包括浮动方式）进行布局。（包括浮动方式）进行布局。（包括浮动方式）进行布局。relative称为称为称为称为相对定位相对定位相对定位相对定位使用相对定位的盒子的位置常以标准流的排版使用相对定位的盒子的位置常以标准流的排版使用相对定位的盒子的位置常以标准流的排版使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子方式为基础，然
3、后使盒子方式为基础，然后使盒子方式为基础，然后使盒子相对相对相对相对于它在于它在于它在于它在原本原本原本原本的的的的标标标标准位置偏移指定准位置偏移指定准位置偏移指定准位置偏移指定的的的的距离距离距离距离。相对定位的盒子仍在标准流中，它后面的盒子相对定位的盒子仍在标准流中，它后面的盒子相对定位的盒子仍在标准流中，它后面的盒子相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。仍以标准流方式对待它。仍以标准流方式对待它。仍以标准流方式对待它。position属性属性absolute绝对定位，盒子的位置绝对定位，盒子的位置绝对定位，盒子的位置绝对定位，盒子的位置以以以以它的它的它的它的包
4、含框为基准包含框为基准包含框为基准包含框为基准进进进进行行行行偏移偏移偏移偏移。绝对定位的盒子绝对定位的盒子绝对定位的盒子绝对定位的盒子从标准流中脱离从标准流中脱离从标准流中脱离从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影这意味着它们对其后的兄弟盒子的定位没有影这意味着它们对其后的兄弟盒子的定位没有影这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。响，其他的盒子就好像这个盒子不存在一样。响，其他的盒子就好像这个盒子不存在一样。响，其他的盒子就好像这个盒子不存在一样。fixed称为固定定位，它和绝对定位类似，只是称为固定定位，它和绝对定位类似，只是称为
5、固定定位，它和绝对定位类似，只是称为固定定位，它和绝对定位类似，只是以浏以浏以浏以浏览器窗口为基准进行定位览器窗口为基准进行定位览器窗口为基准进行定位览器窗口为基准进行定位，也就是当拖动浏览，也就是当拖动浏览，也就是当拖动浏览，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。器窗口的滚动条时，依然保持对象位置不变。器窗口的滚动条时，依然保持对象位置不变。器窗口的滚动条时，依然保持对象位置不变。静态定位（静态定位（static）表示块表示块保持保持在在原本原本应该在的应该在的位置位置上，即该上，即该值没有任何移动的效果。值没有任何移动的效果。Box-Box-1 1 bodybodymar
6、gin:20px;margin:20px;font:Arial 12px;font:Arial 12px;#father#father background-color:#a0c8ff;background-color:#a0c8ff;border:1px dashed#000000;border:1px dashed#000000;padding:15px;padding:15px;#block1#block1 background-color:#fff0ac;background-color:#fff0ac;border:1px dashed#000000;border:1px dashe
7、d#000000;padding:10px;padding:10px;文档结构与样式如下所示二、相对定位二、相对定位使用相对定位，除了使用相对定位，除了将将position属性值设属性值设置为置为relative之外，还需要之外，还需要指定指定一定的一定的偏偏移量移量。水平方向通过水平方向通过left或或right属性来指定，竖属性来指定，竖直方向通过直方向通过top和和bottom来指定。来指定。1、一个子块的情况、一个子块的情况在在在在#block1#block1中将中将中将中将positionposition属性设置为属性设置为属性设置为属性设置为relativerelative，并设，
8、并设，并设，并设置偏移距离，代码如下：置偏移距离，代码如下：置偏移距离，代码如下：置偏移距离，代码如下：#block1#block1 background-color:#fff0ac;background-color:#fff0ac;border:1px dashed#000000;border:1px dashed#000000;padding:10px;padding:10px;position:relativeposition:relative;/*relative;/*relative相对定位相对定位相对定位相对定位*/left:30px;left:30px;top:30px;top:
9、30px;效果如下图所示效果如下图所示可以看出，它可以看出，它向右向右和和向下向下分别移动了分别移动了30像素像素“left:30px”的作用就是使的作用就是使Box-1的新位置的新位置在它原来位置的左边框右侧在它原来位置的左边框右侧30像素的地方。像素的地方。“top:30px”的作用就是使的作用就是使Box-1的新位置的新位置在原来位置的上边框下侧在原来位置的上边框下侧30像素的地方。像素的地方。两个子块的情况两个子块的情况将上面的页面加以改造，在父将上面的页面加以改造，在父div中放两中放两个个div。效果如下：。效果如下：结构和样式为结构和样式为:Box-Box-1 1 Box-Box
10、-2 2 bodybody margin:20px;margin:20px;font-font-family:Arialfamily:Arial;font-size:12px;font-size:12px;#father#father background-color:#a0c8ff;background-color:#a0c8ff;border:1px dashed#000000;border:1px dashed#000000;padding:15px;padding:15px;#father div#father div background-color:#fff0ac;backgrou
11、nd-color:#fff0ac;border:1px dashed#000000;border:1px dashed#000000;padding:10px;padding:10px;将子块将子块1的的position属性设置成属性设置成relative，代码，代码为：为：#block1 position:relative;bottom:30px;right:30px;子块子块子块子块2 2还没有设置任何还没有设置任何还没有设置任何还没有设置任何与定位相关的属性。与定位相关的属性。与定位相关的属性。与定位相关的属性。此时的效果如图所示此时的效果如图所示此时的效果如图所示此时的效果如图所示可以
12、看到可以看到可以看到可以看到子块子块子块子块1 1的位置的位置的位置的位置以自身为基准以自身为基准以自身为基准以自身为基准向上向上向上向上和和和和向左各偏移了向左各偏移了向左各偏移了向左各偏移了3030像素像素像素像素而而而而子块子块子块子块2 2和原来的位置和原来的位置和原来的位置和原来的位置相比相比相比相比没有任何变化没有任何变化没有任何变化没有任何变化。如果同时设置两个子如果同时设置两个子如果同时设置两个子如果同时设置两个子块的块的块的块的positionposition属性都为属性都为属性都为属性都为relativerelative，即将子块，即将子块，即将子块，即将子块2 2加加加加
13、上相对定位属性，上相对定位属性，上相对定位属性，上相对定位属性，#block2#block2position:relativeposition:relative;top:30px;top:30px;left:30px;left:30px;则效果如图所示：则效果如图所示：则效果如图所示：则效果如图所示：相对定位原则相对定位原则1）使用相对定位的盒子，会相对于它在）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达原本的位置，通过偏移指定的距离，到达新的位置新的位置2）使用相对定位的盒子仍在标准流中，）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。它对父块和兄弟
14、盒子没有任何影响。需要指出的是，上面的实验是针对标准流需要指出的是，上面的实验是针对标准流方式进行的，实际上，对浮动的盒子使用方式进行的，实际上，对浮动的盒子使用相对定位也是一样的。相对定位也是一样的。绝对定位绝对定位准备网页，效果如图所示准备网页，效果如图所示结构和样式为结构和样式为:Box-1 Box-1 Box-Box-2 2 Box-3 Box-3 bodybody margin:20px;margin:20px;font-font-family:Arialfamily:Arial;font-size:12px;font-size:12px;#father#father backgro
15、und-color:#a0c8ff;background-color:#a0c8ff;border:1px dashed#000000;border:1px dashed#000000;padding:15px;padding:15px;#father div#father div background-color:#fff0ac;background-color:#fff0ac;border:1px dashed#000000;border:1px dashed#000000;padding:10px;padding:10px;将将将将Box-2Box-2的的的的positionpositi
16、on属性改为属性改为属性改为属性改为absoluteabsolute，效果如图所示，效果如图所示，效果如图所示，效果如图所示 这时以浏览器窗口作为定这时以浏览器窗口作为定这时以浏览器窗口作为定这时以浏览器窗口作为定位基准。位基准。位基准。位基准。此外，该此外，该此外，该此外，该盒子彻底脱离标盒子彻底脱离标盒子彻底脱离标盒子彻底脱离标准流准流准流准流，Box-3Box-3会紧贴会紧贴会紧贴会紧贴Box-1Box-1，就好像没有就好像没有就好像没有就好像没有Box-2Box-2这个盒子这个盒子这个盒子这个盒子存在一样。代码为：存在一样。代码为：存在一样。代码为：存在一样。代码为：#block2#b
17、lock2 position:absoluteposition:absolute;top:0px;top:0px;right:0px;right:0px;然而不是所有的绝对定位都以浏览器为基准来然而不是所有的绝对定位都以浏览器为基准来然而不是所有的绝对定位都以浏览器为基准来然而不是所有的绝对定位都以浏览器为基准来定位，接下来对上面的代码做一处修改，为父定位，接下来对上面的代码做一处修改，为父定位，接下来对上面的代码做一处修改，为父定位，接下来对上面的代码做一处修改，为父divdiv增加一个定位样式增加一个定位样式增加一个定位样式增加一个定位样式#father#fatherbackground-
18、color:#a0c8ff;background-color:#a0c8ff;border:1px dashed#000000;border:1px dashed#000000;padding:15px;padding:15px;position:relativeposition:relative;这时效果就变化了，如图所示。偏移距离没这时效果就变化了，如图所示。偏移距离没有变化，但是有变化，但是偏移的基准不再是浏览器窗口，偏移的基准不再是浏览器窗口，而是它的父而是它的父div。绝对定位的原则绝对定位的原则1）使用绝对定位的盒子以它的）使用绝对定位的盒子以它的“最近最近”的一个的一个“已经定位
19、已经定位”的的“祖先元素祖先元素”为为基准基准进行进行偏移偏移。如果没有已经定位的祖先元素如果没有已经定位的祖先元素，那么会，那么会以以浏览器窗口浏览器窗口为基准进行定位。为基准进行定位。2）绝对定位绝对定位的框的框从标准流从标准流中中脱离脱离，这意味，这意味着它们对其后的兄弟盒子的定位没有影响，着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。其他的盒子就好像这个盒子不存在一样。所谓所谓“已经定位已经定位”元素的含义：元素的含义：position属性被设置属性被设置并且被设置为并且被设置为不是不是static的任意的任意一种方一种方式式那么该元素就被称作是那么该元素就
20、被称作是“已经定位已经定位”的元素。的元素。关于关于“祖先祖先”元素：元素：即即包含该元素包含该元素的的所有容器元素所有容器元素。结合结合“DOM”树更容易理解。树更容易理解。即从该元素节点开始，走到根节点，经即从该元素节点开始，走到根节点，经过的所有节点都是它的祖先。过的所有节点都是它的祖先。关于关于“最近最近”：在在一个一个节点节点的的所有祖先节点所有祖先节点中，找出所中，找出所有有“已经定位已经定位”的元素的元素其中其中距离该节点最近距离该节点最近的一个节点的一个节点父亲比祖父近，祖父比曾祖父近父亲比祖父近，祖父比曾祖父近以此类推，以此类推，“最近最近”的就是要找的定位的就是要找的定位基
21、准基准在这个实例中，在父在这个实例中，在父在这个实例中，在父在这个实例中，在父divdiv没有设置没有设置没有设置没有设置positionposition属性属性属性属性时，时，时，时，Box-2Box-2这个这个这个这个divdiv的所有祖先都不符合的所有祖先都不符合的所有祖先都不符合的所有祖先都不符合“已经已经已经已经定位定位定位定位”的要求，因此它会以浏览器窗口为基准的要求，因此它会以浏览器窗口为基准的要求，因此它会以浏览器窗口为基准的要求，因此它会以浏览器窗口为基准来定位。来定位。来定位。来定位。而当父而当父而当父而当父divdiv将将将将positionposition属性设置为属性
22、设置为属性设置为属性设置为relativerelative以后，以后，以后，以后，它就符合它就符合它就符合它就符合“已经定位已经定位已经定位已经定位”的要求了的要求了的要求了的要求了它又是所有祖先中唯一一个已经定位的，也满它又是所有祖先中唯一一个已经定位的，也满它又是所有祖先中唯一一个已经定位的，也满它又是所有祖先中唯一一个已经定位的，也满足足足足“最近最近最近最近”这个要求，因此就会以它为基准进这个要求，因此就会以它为基准进这个要求，因此就会以它为基准进这个要求，因此就会以它为基准进行定位。行定位。行定位。行定位。绝对定位的特殊性质绝对定位的特殊性质如果设置了绝对定位，而没有设置偏移，那如果设置了绝对定位，而没有设置偏移，那么它仍将保持在原来的位置。么它仍将保持在原来的位置。这个性质可以用于需要使某个元素脱离标准这个性质可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。流，而仍然希望它保持在原来的位置的情况。作业作业