《
body的子元素的定位问题》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331602013.htm
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> body{position:absolute;} #div1,#div2 { position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ } #div1 { width:150px; height:50px; margin-top:-25px; margin-left:-75px; } #div2 { width:50px; height:150px; margin-top:-75px; margin-left:-25px; } </style> <script type="text/javascript"> </script> <title>body{position:relative;}</title> </head> <body> <h1> body{position:absolute;}</h1> <div id="div1"></div> <div id="div2"></div> </body> </html>
哇，好神奇啊，这次是贴到左上角中去！我猜想是body会依据更上级的元素定位，因为我们没有为body设置偏移量（top与left），旅行器会应用默认值，如top:0,left:0，可能随游览器的不同而不同的……但假如给的默认值雷同的话，那么怎么说明上面body{position:relative}的景象呢？先不论了，看下一例子：
运行代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> body{position:relative;} #div1,#div2 { position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ } #div1 { width:150px; height:50px; margin-top:-25px; margin-left:-75px; } #div2 { width:50px; height:150px; margin-top:-75px; margin-left:-25px; } </style> <script type="text/javascript"> </script> <title>body{position:relative;}</title> </head> <body> <h1>position</h1> <div id="div1"></div> <div id="div2"></div> </body> </html>
十字架贴到正上方去！
Tag：定位 body 定位 body
仍是贴到左上角去！
运行代码
运行代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> html{position:fixed;} #div1,#div2 { position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ } #div1 { width:150px; height:50px; margin-top:-25px; margin-left:-75px; } #div2 { width:50px; height:150px; margin-top:-75px; margin-left:-25px; } </style> <script type="text/javascript"> </script> <title>html{position:fixed;}</title> </head> <body> <h1>position</h1> <div id="div1"></div> <div id="div2"></div> </body> </html>
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> html{position:rabsolute;} #div1,#div2 { position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ } #div1 { width:150px; height:50px; margin-top:-25px; margin-left:-75px; } #div2 { width:50px; height:150px; margin-top:-75px; margin-left:-25px; } </style> <script type="text/javascript"> </script> <title>html{position:absolute;}</title> </head> <body> <h1>position</h1> <div id="div1"></div> <div id="div2"></div> </body> </html>
这个跟body{position:relative;}一样是正上方，那html{position:absolute}大家应当能猜到吧！
如我们所看到的一样，绝对居中实现了！但我要讲究的是那个相对定位的DIV毕竟是以哪个元素作为参照物呢？！书上都说了，是以一个被定位的先人元素为参照物，其position值为relative,absolute,fixed!我们一一试一下！
今天到蓝色幻想做腾讯口试题碰到
--> [
网站建设之]body的子元素的定位问题
完了吗？！未完，我们还有两个特例不试！
运行代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> html{position:relative;} #div1,#div2 { position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ } #div1 { width:150px; height:50px; margin-top:-25px; margin-left:-75px; } #div2 { width:50px; height:150px; margin-top:-75px; margin-left:-25px; } </style> <script type="text/javascript"> </script> <title>html{position:relative;}</title> </head> <body> <h1>position</h1> <div id="div1"></div> <div id="div2"></div> </body> </html>
运行代码
既然这样，咱们看看body的父元素html
贴到左上角去……
运行代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> #div1,#div2 { position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ } #div1 { width:150px; height:50px; margin-top:-25px; margin-left:-75px; } #div2 { width:50px; height:150px; margin-top:-75px; margin-left:-25px; } </style> <script type="text/javascript"> </script> <title>position</title> </head> <body> <h1>body没有定义position</h1> <div id="div1"></div> <div id="div2"></div> </body> </html>
运行代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> body{position:fixed;} #div1,#div2 { position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*当初偏右方*/ } #div1 { width:150px; height:50px; margin-top:-25px; margin-left:-75px; } #div2 { width:50px; height:150px; margin-top:-75px; margin-left:-25px; } </style> <script type="text/javascript"> </script> <title>position:fixed;</title> </head> <body> <h1>position</h1> <div id="div1"></div> <div id="div2"></div> </body> </html>
相关的主题文章：
(责任编辑：网站建设)
body的子元素的定位问题相关文章