CSS中相对定位用百分比显示问题
<!doctypehtml><head><metacharset="UTF-8"><title>Document</title><style>#div1{width:20...
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{ width: 200px; height: 200px; background-color: red; position: relative; top: 20%;}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
这里的top:20%在chrome和IE8及以上都不起作用，但是用left:20%;就有效果。这是为什么呢？ 展开
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{ width: 200px; height: 200px; background-color: red; position: relative; top: 20%;}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
这里的top:20%在chrome和IE8及以上都不起作用，但是用left:20%;就有效果。这是为什么呢？ 展开
展开全部
因为在这两个浏览器中，body的默认高度，并不是浏览器的可视区域高度。但是body的默认宽度是浏览器的可视区域宽度。所以，body的高度是0px，20%也是0了。你可以自己打开chrome的控制台，查看你们各个document元素的属性，body的height属性等于div的height。不清楚再追问。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你的BODY，和HTML加上高度，100%就可以了，
高度默认是auto的，，宽度不一样，大部分元素宽度都是100%的。
高度默认是auto的，，宽度不一样，大部分元素宽度都是100%的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
