相对/绝对定位 [英] relative/absolute positioning
问题描述
我正在尝试创建菜单系统。
主菜单是一张表
< table>< tr>< td> menu1< ; / td>< td> menu2< / td>< / tr>< / table>
我尝试插入子菜单，使其相对于主菜单
项目。对于menu1，相关代码变为：
< td style =" position：relative;"> menu1< div style =" position：absolute; top：20;
left：0;">
< a href = x.htm> option1< / a>< br>
< a href = y.htm> option2< / a>
< / div>< / td>
这是有效的在IE中很好：div相对于menu1的td定位。
然而，在Mozilla它不起作用。 div相对于页面的顶部
。
我做错了什么？
谢谢，
Wim
Wim Roffal于2004年8月8日在comp.lang.javascript中写道 ：
我正在尝试创建一个菜单系统。
主菜单是一个表
< table>< tr>< td> menu1< / td>< td> menu2< / td>< / tr>< / table>
不，我尝试插入子菜单，使其变得相对于主要菜单项。对于menu1，相关代码变为：
< td style =" position：relative;"> menu1< div style =" position：absolute;
top：20; left：0;">
< a href = x.htm> option1< / a>< br>
< a href = y.htm> option2< / a>
< / div>< / td>
这在IE中工作正常：div相对于
menu1的td定位。但是，在Mozilla中它不起作用。 div变得相对于页面顶部。
我做错了什么？
你做错了什么在一个javascript NG中询问这个问题。
没有可以看到的脚本和
的css样式有一个名为NG的页面：
comp.infosystems。 www.authoring.stylesheets
[这个组的一个奇怪的名字，我承认]
-
Evertjan。
荷兰。
（请在我的电子邮件地址中将x'变为点数，
但是让我们继续讨论新闻组）
在文章< ch ********** @ reader11.wxs.nl>中， wi ************* @ nospamm-planet.nl
启发我们...... blockquote class =post_quotes>
< td style =" position：relative;"> menu1< div style =" positi于：绝对的;顶部：20;
左：0;">
< a href = x.htm> option1< / a>< br>
< a href = y.htm> ; option2< / a>
< / div>< / td>
这在IE中工作正常：div相对于menu1的td定位。
然后IE错了。您可能通过不提供带有URL的有效
doctype来使用怪癖模式。
绝对是绝对的。
但是，在Mozilla中它不起作用。 div变得相对于页面的顶部。
应该如此。
我做错了什么？
将CSS问题发布到javascript组。 ;）
将它放在页面顶部，保存，然后再次查看IE。什么
发生了什么？
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.0 Transitional // EN"
" ; http：//www.w3.org/TR/html4/loose.dtd">
见
http://msdn.microsoft.com/workshop/a...ts/doctype.asp
请参阅Evertjan提到的小组以及其他CSS帮助。
-
-
~kaeli~
在日光浴时读书会让你感觉很红。
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
kaeli< ti **** **@NOSPAM.comcast.net>写道：
在文章< ch ********** @ reader11.wxs.nl>中， wi ************* @ nospamm-planet.nl
用...启发我们
< td style =" position：relative;"> menu1< div style =" position：absolute;顶部：20;
左：0;">
这在IE中工作正常：div相对于menu1的td定位。
然后IE错了。您可能通过不提供带有URL的有效
doctype来使用怪癖模式。
绝对是绝对的。
实际上，位置是：绝对"必须相对于其包含
块的位置，这是最近的封闭定位块级元素，
（如果有的话）。这就是为什么它与td不相关的原因。 （它不是块级别
元素）。
< URL：http：//www.w3.org/TR/CSS2/visuren.html#absolute-定位>
< URL：http：//www.w3.org/TR/CSS2/visuren.html#q29>
< URL：http：// www.w3.org/TR/CSS2/visudet.html#containing-block-details>
问题在于td有display：table-cell而不是
" display-block"。
无论如何，top：20"也是错的，应该是top：20px。那个
意味着div的y位置没有改变它的默认值，
这可能就是为什么* *似乎*无论如何都要正确定位。
但是，在Mozilla中它不起作用。 div变得相对于页面的顶部。
同样在Opera中。如果我添加display：block到td，然后div
确实定位于wrt。 td，因为它现在是一个定位的
块级元素，所以它成为div的包含块。
因为它应该是。
实际上，是的，但原因并不明显:)
把它放在页面顶部，保存，然后查看IE再次。
发生了什么？
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.0 Transitional // EN"
" http：//www.w3.org/TR /html4/loose.dtd">
我同意并修复了CSS中的错误。然后可能包裹
" div"在另一个相对定位的div中，在td里面。
/ L
-
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML死亡颜色：< URL：http：//www.infimum.dk/HTML/rasterTriangleDOM.html>
''没有判断的信仰只会降低神灵的精神。''
I am trying to create a menu system.
The mainmenu is a table
<table><tr><td>menu1</td><td>menu2</td></tr></table>
No I try insert the submenu so that it becomes relative to the main menu
item. For menu1 the relevant code then becomes:
<td style="position:relative;">menu1<div style="position:absolute; top:20;
left:0;">
<a href=x.htm>option1</a><br>
<a href=y.htm>option2</a>
</div></td>
This works fine in IE: the div is positioned relative to the td of menu1.
However, in Mozilla it doesn''t work. The div becomes relative to the top of
the page.
What am I doing wrong?
Thanks,
Wim
Wim Roffal wrote on 08 sep 2004 in comp.lang.javascript:
I am trying to create a menu system.
The mainmenu is a table
<table><tr><td>menu1</td><td>menu2</td></tr></table>
No I try insert the submenu so that it becomes relative to the main
menu item. For menu1 the relevant code then becomes:
<td style="position:relative;">menu1<div style="position:absolute;
top:20; left:0;">
<a href=x.htm>option1</a><br>
<a href=y.htm>option2</a>
</div></td>
This works fine in IE: the div is positioned relative to the td of
menu1. However, in Mozilla it doesn''t work. The div becomes relative
to the top of the page.
What am I doing wrong?
What you are doing wrong is asking this in a javascript NG.
There is no script to be seen and
for css style there is a NG called:
comp.infosystems.www.authoring.stylesheets
[a strange name for this group, I admit]
--
Evertjan.
The Netherlands.
(Please change the x''es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)
In article <ch**********@reader11.wxs.nl>, wi*************@nospamm-planet.nl
enlightened us with...
<td style="position:relative;">menu1<div style="position:absolute; top:20;
left:0;">
<a href=x.htm>option1</a><br>
<a href=y.htm>option2</a>
</div></td>
This works fine in IE: the div is positioned relative to the td of menu1.
Then IE is wrong. You''re probably using quirks mode by not providing a valid
doctype with a URL.
Absolute is absolute.
However, in Mozilla it doesn''t work. The div becomes relative to the top of
the page.
As it should be.
What am I doing wrong?
Posting a CSS question to a javascript group. ;)
Put this at the top of the page, save it, then look in IE again. What
happened?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
See
http://msdn.microsoft.com/workshop/a...ts/doctype.asp
See the group mentioned by Evertjan as well for additional CSS help.
--
--
~kaeli~
Reading while sunbathing makes you well red.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
kaeli <ti******@NOSPAM.comcast.net> writes:
In article <ch**********@reader11.wxs.nl>, wi*************@nospamm-planet.nl
enlightened us with...
<td style="position:relative;">menu1<div style="position:absolute; top:20;
left:0;"> This works fine in IE: the div is positioned relative to the td of menu1.
Then IE is wrong. You''re probably using quirks mode by not providing a valid
doctype with a URL.
Absolute is absolute.
Actually, "position:absolute" must position relative to its containing
block, which is the nearest enclosing positioned block-level element,
if any. That is why it is not relative to the "td" (it is not a block level
element).
<URL:http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning>
<URL:http://www.w3.org/TR/CSS2/visuren.html#q29>
<URL:http://www.w3.org/TR/CSS2/visudet.html#containing-block-details>
The problem is that the "td" has "display:table-cell" and not
"display-block".
Anyway, the "top:20" is also wrong, and should be "top:20px". That
means that the y-position of the div is not changed from its default,
which might be why it *seems* to be positionened correctly anyway.
However, in Mozilla it doesn''t work. The div becomes relative to the top of
the page.
Ditto in Opera. If I add "display:block" to the "td", then the "div"
does become positioned wrt. the "td", because it is now a positioned
block-level element, so it becomes the containing block of the "div".
As it should be.
Actually, yes, but the reasons for that are not obvious :)
Put this at the top of the page, save it, then look in IE again. What
happened?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
I concur, and fix the bugs in the CSS. Then perhaps wrap the
"div" in another, relatively positioned, "div" inside the "td".
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
''Faith without judgement merely degrades the spirit divine.''
这篇关于相对/绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
