相对定位按百分比设置top为什么没有用,但是按百分比设置left却有用

相对定位按百分比设置top为什么没有用,但是按百分比设置left却有用

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

div{

width: 100px;

height:100px;

line-height: 100px;

text-align: center;

position: relative;

top: 50%;

border:2px solid red;

}

</style>

</head>

<body>

<div>A</div>

</body>

</html>

http://img1.sycdn.imooc.com//climg/5acf023a0001d24502230309.jpg


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

http://img1.sycdn.imooc.com//climg/5acf3c080001af0706780973.jpg

代码在我这里是没有问题的,请问同学用的是谷歌或者火狐浏览器吗?

  • 奥义憨憨 提问者 #1
    奥,原来是这样啊,我原来写了一个body{height:100%}并没有用,but,html,body{height:100%;}是可以的,不知道为什么高度按百分比为什么要这样设置才好使,感谢大魔王同学的解答,同学我用的也是谷歌浏览器啊啊啊啊啊啊啊啊啊啊
    2018-04-13 09:04:08
Miss路 2018-04-12 18:56:08

你试了吗。给body设置一个高度百分比top有效果的,百分比是相对于父元素来讲的,如果父元素没有宽高,子元素就相当于是0,所以就是不骑作用,但是这里宽度不一样,浏览器窗口的宽度是有的,所以你在不给父元素设置宽度的时候,它会起作用,但是body的高度是不确定的,所以top:50%不会起作用。

http://img1.sycdn.imooc.com//climg/5acf3ad00001194c05300651.jpg

祝学习愉快!

  • 提问者 奥义憨憨 #1
    明白了 感谢
    2018-04-13 09:05:04
一个bug不要慌 2018-04-12 18:20:07

relative是使元素相对于其正常位置进行定位,

在此代码中,需要给body设置一个高度百分比top就有效果啦!


  • 提问者 奥义憨憨 #1
    没有用啊 。。。
    2018-04-12 18:46:24
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师