body的子元素的定位问题 - Info110站长资讯网-中国站长的资源库，资讯、代码、教学、评测

发表于:2009-11-24 浏览:66 作者: 来源:互联网

关键字:BODY,元素

描述: 今天到蓝色理想做腾讯面试题遇到TEXTAREAid=runcode1style="WIDTH:80%"rows=10<!doctypehtml> <htmldir="ltr"lang="zh-CN"> <head> <metacharset="utf-8"/> <metahttp

今天到蓝色理想做腾讯面试题遇到

如我们所看到的一样，绝对居中实现了！但我要考究的是那个绝对定位的DIV究竟是以哪个元素作为参照物呢？！书上都说了，是以一个被定位的祖先元素为参照物，其position值为relative,absolute,fixed!我们逐个试一下！

十字架贴到正上方去！

哇，好神奇啊，这次是贴到左上角中去！我猜测是body会根据更上级的元素定位，由于我们没有为body设置偏移量（top与left），游览器会使用默认值，如top:0,left:0，可能随游览器的不同而不同的……但如果给的默认值相同的话，那么怎样解释上面body{position:relative}的现象呢？先不管了，看下一例子：

还是贴到左上角去！

既然这样，我们看看body的父元素html

贴到左上角去……

这个和body{position:relative;}一样是正上方，那html{position:absolute}大家应该能猜到吧！

完了吗？！未完，我们还有两个特例没有试！

{[csc:pagelist]}

<!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:static;} #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>

<!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:static;} #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>

这两次，它们就乖乖居中了！那么这两个DIV是相对谁定位呢？！市面上的书（书名我就不说了，毕竟是我的入门书泪流满面）一般都是这样说的，上网搜也是这样说的——“absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据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{background:#D5F3F4;} body{border:solid 4px blue;height:100px;width:50%;margin:0 auto;background:#F0DAD2;} span{position:absolute;left:0;top:0;border:solid 2px red;background:#E8E8FF;} </style> <title>html?body?</title> </head> <body> <h1>这是body的内部！</h1> <span>我相对与html定位，除非body显式地设置position:relative;</span> </body> </html>

一目了然，body中的元素如果它们的祖先元素没有定位元素，它们就相对于没有被定位的html元素定位！也即保证html的position为static，也就是其默认值！同时，我们发现html才是游览器的窗口。看了许多文章，大家都一般认同不要用body来布局，建义在body中创建一个DIV作为wrapper!最后是z-index，由于IE的z-index有BUG，因此也不建议取负值。

附上试题
将如下图像重构，要求在页面上水平垂直居中！分别用2个DIV，3个DIV，5个DIV实现！
这是个正的十字架，宽是50px；长是150px

两个DIV的见第一个运行框

这是三个DIV的

<!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,#div3 { position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ } #div1 { width:150px; height:50px; margin-top:-25px; margin-left:-75px; } #div2 { width:50px; height:50px; margin-top:-75px; margin-left:-25px; } #div3 { width:50px; height:50px; margin-top:25px; margin-left:-25px; } </style> <script type="text/javascript"> </script> <title>position</title> </head> <body> <h1>三个DIV</h1> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>

三个DIV的另一种解法

<!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,#div3 { position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ } #div1 { width:50px; height:150px; margin-top:-75px; margin-left:-25px; } #div2 { width:50px; height:50px; margin-top:-25px; margin-left:-75px; } #div3 { width:50px; height:50px; margin-top:-25px; margin-left:25px; } </style> <script type="text/javascript"> </script> <title>position</title> </head> <body> <h1>三个DIV</h1> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>

五个DIV的第一种解法

<!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,#div3 ,#div4,#div5{ position:absolute; background:#f00; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ width:50px; height:50px; } #div1 {/*top*/ margin-top:-75px; margin-left:-25px; } #div2 {/*middle*/ margin-top:-25px; margin-left:-25px; } #div3 {/*right*/ margin-top:-25px; margin-left:25px; } #div4 {/*left*/ margin-top:-25px; margin-left:-75px; } #div5 {/*bottom*/ margin-top:25px; margin-left:-25px; } </style> <script type="text/javascript"> </script> <title>position</title> </head> <body> <h1>五个DIV</h1> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> </body> </html>

五个DIV的第二种解法

<!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,#div3 ,#div4,#div5{ position:absolute; background:#fff; top:50%;/*现在偏下方*/ left:50%;/*现在偏右方*/ width:50px; height:50px; } #div1 {/*big*/ width:150px; height:150px; margin-top:-75px; margin-left:-75px; background:#f00; } #div2 {/*左上*/ margin-top:-75px; margin-left:-75px; } #div3 {/*右上*/ margin-top:-75px; margin-left:25px; } #div4 {/*左下*/ margin-top:25px; margin-left:-75px; } #div5 {/*右下*/ margin-top:25px; margin-left:25px; } </style> <script type="text/javascript"> </script> <title>position</title> </head> <body> <h1>五个DIV</h1> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> </body> </html>

body的子元素的定位问题 [ 网站地图 ]