css - position:relative 配合top-50%; 无效
本文介绍了css - position:relative 配合top-50%; 无效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
id为son的元素设置position:relative后，left:-50%生效，top:-50%没有效果。为什么？？
代码如下
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<style type="text/css">
#father{
width:400px;
height:400px;
border:1px solid red;
float:left;
position:relative;
}
#trap{
border:1px solid yellow;
position:absolute;
top:50%;
left:50%;
}
#son{
width:100px;
height:100px;
position:relative;
top:-50%;
left:-50%;
background:blue;
}
</style>
</head>
<body>
<div id="father">
<div id="trap">
<div id="son"></div>
</div>
</div>
</body>
</html>解决方案
这个我真的得回答下，之前我也遇到过类似的疑问，不啰嗦，直接上证据：
width的值是百分比的情况：
height的值是百分比的情况：
从上面两个解释来看，也就是说子元素设置的width或者height是百分比的值跟父元素的值有关，但是呢，设置width为百分比，不需要父元素明确设置width,但是子元素设置height百分比，父元素必须明确设置高度，原因看我上的两张图片解释。回过来说你的情况，left百分比值跟父元素宽有关，top跟父元素高有关，父元素width不用明确设置，但是height需要，因为你父元素没有设置高度，所以top没有起作用，但是left其作用，是因为父元素width不是强制性的，所以其中一种解决办法就是：给#trap元素设置高度height: 100px就生效啦
这篇关于css - position:relative 配合top-50%; 无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
