今天到蓝色理想做腾讯面试题遇到
<!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>运行代码
如我们所看到的一样，绝对居中实现了！但我要考究的是那个绝对定位的DIV究竟是以哪个元素作为参照物呢？！书上都说了，是以一个被定位的祖先元素为参照物，其position值为relative,absolute,fixed!我们逐个试一下！
<!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>运行代码
十字架贴到正上方去！
<!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: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的父元素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: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>运行代码
贴到左上角去……
html{position:relative;}position
运行代码
这个和body{position:relative;}一样是正上方，那html{position:absolute}大家应该能猜到吧！
html{position:absolute;}position
运行代码
完了吗？！未完，我们还有两个特例没有试！
<!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，即根据浏览器窗口。”真的这样吗？！
运行代码
一目了然，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>运行代码
================================华丽的分界线==================================
回 fishKuro ：
这要看情况了！但你的参照物必须是父级元素或祖先元素，它们有一个是定位元素（当然不包括我本文提到的极端情形，body与html作参照物时，不能为定位元素。）
然后是子元素是绝对定位元素或是相对定位元素，但无论它是哪种，如果没有设置top，left，bottom与right任何一个，它和普通元素无异，一样受文档流影响。
<!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 { background:red; width:200px; height:200px; padding:100px; position:relative; } #div2 { background:green; width:140px; height:140px; } #div3 { background:aqua; width:100px; height:100px; // margin:-10px; /*position:relative; 效果是一样*/ position:absolute; } </style> <title>如果子元素是绝对定位</title> </head> <body> <h2>如果子元素是绝对定位元素，并且其祖先元素中拥有定位元素，但它（指子元素），没有设置top，left，bottom与right任何一个，它和普通元素无异，一样受文档流影响。</h2> <div id="div1"> div1为div2的父元素，并且是相对定位元素，<br/> 也就是所谓的包含块，(父元素是文字是用来测试div2是否跳出文档流) <div id="div2">div2为div3的父元素，但非定位元素 <div id="div3">div3是绝对定位元素 </div> </div> </div> </body> </html>运行代码
但设置于top等定位属性随便一个……
<!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 { background:red; width:200px; height:200px; padding:100px; position:relative; } #div2 { background:green; width:140px; height:140px; } #div3 { background:aqua; width:100px; height:100px; // margin:-10px; top:0px; /*position:relative; 效果是一样*/ position:absolute; } </style> <title>如果子元素是绝对定位</title> </head> <body> <h2>如果子元素是绝对定位元素，并且其祖先元素中拥有定位元素，并且top为10px;</h2> <div id="div1"> div1为div2的父元素，并且是相对定位元素，<br/> 也就是所谓的包含块，(父元素是文字是用来测试div2是否跳出文档流) <div id="div2">div2为div3的父元素，但非定位元素 <div id="div3">div3是绝对定位元素 top:0px;</div> </div> </div> </body> </html>运行代码
top为正数，会让元素向上移动，反之亦然。
<!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 { background:red; width:200px; height:200px; padding:100px; position:relative; } #div2 { background:green; width:140px; height:140px; } #div3 { background:aqua; width:100px; height:100px; margin:-10px; top:10px; position:relative; } </style> <title>如果子元素是绝对定位</title> </head> <body> <h2>如果子元素是相对定位元素，并且其祖先元素中拥有定位元素，并且top为0px;</h2> <div id="div1"> div1为div2的父元素，并且是相对定位元素，<br/> 也就是所谓的包含块，(父元素是文字是用来测试div2是否跳出文档流) <div id="div2">div2为div3的父元素，但非定位元素 <div id="div3">div3是相对定位元素 margin:-10px; top:10px;</div> </div> </div> </body> </html>运行代码
top为正数，会让元素向下移动，反之亦然。
而margin的参照物永远为自己，就像position：relative那样！。如果你利用margin来移动自身，尽管你四个方向都设置，它会优先考虑左上角方向！
这是最后一种情形的立体效果，下面的平面是其祖先定位元素，上面悬浮的长方体是相对定位子元素，被从文档流中拖出来，我们可以用margin让它移动！但那个坑，文档流是填不了它的，它会像幽灵一样占着个空间！Over!
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
