开发者社区> 问答> 正文

position:relative 设置top值为50%,为什么不会发生相应的向下偏移?

设置相对定位元素的top元素和left元素的值为50%,该元素只发生了水平方向的偏移,而没有发生垂直方向的偏移。

以下是测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
 .html,.body{width:100%;height: 100%;}
 .demo{position:relative;
      top:50%;
      left:50%;}
</style>
</head>
<body>
<div class="demo">
<div>top</div>
<div>bottom</div>
<div>left</div>
<div>right</div>
<div>front</div>
<div>back</div>
</div>
</body>
</html>

效果如下:
screenshot

展开
收起
杨冬芳 2016-06-08 15:42:52 3683 0
1 条回答
写回答
取消 提交回答
  • IT从业

    css 写错了 html,body{width:100%;height: 100%;}

    2019-07-17 19:32:07
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
Top 5 mistakes when wriiting a 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载