‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[求助] 看看我说的对不对_百分比定位

yaokongshafa [楼主]

中级会员

帖子
239 
体力
460  
威望
0  
当前
浙江 杭州
离线
2 天
1# 大 中 小 发表于 2008-6-25 17:20 
在父标签相对定位，子标签绝对定位的情况下，
子标签 {top:50%;left:50%;}
在IE6下，百分比是相对于父标签而言。
在FF下，百分比是相对于父标签的款或高减去子标签的款或高而言。
我看到的效果是这样的，不知道对不对。

 提示：您可以先修改部分代码再运行
。。
性格决定命运。

TOP

yaokongshafa [楼主]

中级会员

帖子
239 
体力
460  
威望
0  
当前
浙江 杭州
离线
2 天
2# 大 中 小 发表于 2008-6-27 09:12 

没有一个人啊，是不是这个问题不值一提呢？
性格决定命运。

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子
441 
体力
883  
威望
0  
当前
广东 深圳
离线
12 天

专长 前端制作
3# 大 中 小 发表于 2008-6-27 09:38 
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
    width:500px;
    height:500px;
    background-color:#3366CC;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    text-align:center;
    /*for FF*/
    display:table-cell;
    vertical-align:middle;
    }
div p {
    background-color:#99CC00;
    /*for IE*/
    +position:absolute;
    top:50%;
    left:50%;
    }
img {
    /*for IE*/
    +position:relative;
    top:-50%;
    left:-50%;
    }
-->
</style>
</head>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
<body>
</body>
</html>
楼主这个例子是绝对居中的方法，因为你在position前加了“+”，FF下是读不出的，所以就谈不上FF下定位与ie有不同，
FF下可以垂直方向上居中是因为display:table-cell;vertical-align:middle;
我爱阿仙奴！

TOP

yaokongshafa [楼主]

中级会员

帖子
239 
体力
460  
威望
0  
当前
浙江 杭州
离线
2 天
4# 大 中 小 发表于 2008-6-27 10:12 
谢谢 zidanezhicong 的帮忙。我把代码改成一致的之后再看，绝对定位的百分比是相对于父标签的高或宽而言的。
是不是在使用margin/padding/left/top···百分比布局的时候都是相对于父标签的高或宽而言的呢？
另外这里的代码改为一致后在ie6/FF中浏览还是有差别，好像是因为它们在判断img标签上的position:relative;上有差别（貌似FF忽略了）。在这里，祖标签（div）是相对定位，父标签（p）是绝对定位，子标签（img）又是相对定位，前两个可以理解，就是不知道该怎么理解子标签的相对定位呢？

 提示：您可以先修改部分代码再运行
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
    margin:0;padding:0;
}
div {
    width:500px;
    height:500px;
    background-color:#3366CC;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
}
div p {
    background-color:#99CC00;
    position:absolute;
    top:50%;
}
img {
    position:relative;
    top:-50%;
    left:-50%;
}
-->
</style>
</head>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
<body>
</body>
</html>
[ 本帖最后由 yaokongshafa 于 2008-6-27 10:22 编辑 ]
性格决定命运。

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子
441 
体力
883  
威望
0  
当前
广东 深圳
离线
12 天

专长 前端制作
5# 大 中 小 发表于 2008-6-27 11:01 
其实ls在p样式上写少了一个left:50%；不写的话，p就会向左对齐。
绝对定位的元素的位置是相对于最近的，已定位的祖先元素的位置来设定。并不一定是父元素.所以绝对定位的百分比是相对最近的，已定位的祖先元素的尺寸来计算。
相对定位的元素的位置是相对于这个元素在文档中的初始位置来设定，所以相对定位的百分比是相对它自己的尺寸来计算。
至于例子中FF下img的相对定位有问题，尚不知道原因！
在opera下和ie下的效果是一样的
我爱阿仙奴！

TOP

yaokongshafa [楼主]

中级会员

帖子
239 
体力
460  
威望
0  
当前
浙江 杭州
离线
2 天
6# 大 中 小 发表于 2008-6-27 12:38 
引用:
所以相对定位的百分比是相对它自己的尺寸来计算
百分比的对象跟自身的定位属性有关系相关联？
性格决定命运。

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子
441 
体力
883  
威望
0  
当前
广东 深圳
离线
12 天

专长 前端制作
7# 大 中 小 发表于 2008-6-27 13:13 
其实个人觉得所有定位都是“相对的”定位。只不过作为参考的的对象不同。偏移尺寸按照它自所参考的对象的尺寸来计算。
relative：因为相对于它自己的常规位置而偏移。偏移尺寸当然按照它自己的尺寸来计算。
absolute：因为相对于最近的，已定位的祖先元素的位置而偏移。偏移尺寸当然按照它的最近的，已定位的祖先元素的尺寸来计算。
fixed：因为相对于视口而偏移。偏移尺寸当然按照视口的尺寸来计算。
只不过relative没有从常规流向中脱离。
我爱阿仙奴！

TOP

yaokongshafa [楼主]

中级会员

帖子
239 
体力
460  
威望
0  
当前
浙江 杭州
离线
2 天
8# 大 中 小 发表于 2008-6-30 17:21 

越来越糊涂了。。。
性格决定命运。

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题