html 元素百分比定位问题

Posted on 2012-8-25, 16:14, by tmser, under web前端 .

百分比是指这个元素它的父元素的百分之多少 ;

对于absolute 定位来说，如果其父级元素没有设置 position:relative; 则百分比为页面可见高度的百分比。

例子证明：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").offset();
    $("#span1").text(x.left);
    $("#span2").text(x.top);
  });
});
</script>
<style>
*{margin:0;padding:0}
</style>
</head>
<body>
<div style="width:400px;height:300px;margin:20px;border:#f00 1px solid;">
<div style="width:200px;height:50px;margin:20px;border:#000 1px solid;">
<p style="border:#0f0 solid 1px;position:absolute;top:20%;left:60px;">本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
</div>
<button>获得 offset</button>
</body>
</html>

你可以修改部分代码在执行。

上面的例子position:absolute，绝对定位， top设置的是 20% 。且其父级元素没有设置 relative。运行后可以看出其 top 取值为页面可见部分高的百分比。

点滴记忆*记忆点滴

html 元素百分比定位问题

相关日志

留下足迹

AD

分类

热门日志

随机日志

日历

标签

最新评论

点滴记忆*记忆点滴

html 元素 百分比定位问题

相关日志

留下足迹

AD

分类

热门日志

随机日志

日历

标签

最新评论

html 元素百分比定位问题