body的子元素的定位问题
2009-08-07 18:25
225 查看
今天到蓝色理想做腾讯面试题遇到
<!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;}
#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;
}
html{position:relative;}
这个和body{position:relative;}一样是正上方，那html{position:absolute}大家应该能猜到吧！
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;
}
html{position:absolute;}
完了吗？！未完，我们还有两个特例没有试！
<!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>
运行代码
================================华丽的分界线==================================
回 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!
<!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;}
#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;
}
html{position:relative;}
position
运行代码这个和body{position:relative;}一样是正上方，那html{position:absolute}大家应该能猜到吧！
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;
}
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，即根据浏览器窗口。”真的这样吗？！
<!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>
运行代码
================================华丽的分界线==================================
回 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!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS 中position:absolute的定位到底是相当于body，还是父级元素的问题
- ArrayList中remove（）方法删除长度大于5的元素之后下标重定位的问题
- selenium切换窗口后定位元素出现问题的解决方案
- 关于使用绝对定位使元素垂直居中的问题
- RF框架-一个简单的脚本实现及元素定位不到问题的解决
- 逆天的IE7中，绝对定位元素之间的遮盖问题
- html5安卓软键盘弹出挤压屏幕空间使定位元素上移的问题
- RobotFramework测试问题二：各种元素不能定位问题
- fixed不以body定位，相对于父级容器定位问题
- IE7中绝对定位元素之间的遮盖问题
- webdriver中定位元素，报无法找到元素的问题
- jQuery EasyUI 用 body 做layout并且定宽居中时，绝对层定位居中问题
- robotframework 基于ext框架开发的web,元素定位等问题
- 当子级元素浮动时让父级元素高度自适应的三种方法（以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法）
- 解决 IE6 不支持绝对定位 fixed 以及IE6下被绝对定位的元素在滚动的时候会闪动的问题
- selenium对未在屏幕展示范围内的元素进行操作时，出现元素无法定位的问题解决
- IE6下绝对定位元素存在1px偏差问题
- IE6中绝对定位元素消失问题
- 【随笔】关于绝对定位absolute相对于父元素定位的问题
- css禁止float浮动元素自动换行/定位问题