body的子元素的定位问题－站长资讯网info110.com

<!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>

.
分页: [1] [2]

TAG: BODY 元素

搜索

body的子元素的定位问题