div包含的表格

时间:2010-10-02 03:16:14

标签: html css

我在div 1中有一张桌子。

然后在div 1之后添加另一个div 2,其位置为:relative;顶部:-250;这样div 2层就在桌面的正上方。但现在在桌子下面有一个很大的空间,然后页面上的任何东西都可以恢复显示(我猜第二个div 2通常没有-250位置变化?) 如何摆脱空间并清除空间?我试过这个......

<div style="clear:both;"></div>

......它没有做任何事情

页面在这里......

http://www.gootar.com/drums/metronome.html

我真的只需要一种方法来创建一个层,我可以在桌面上写入文本(如数字2)。有一个简单的方法吗?

现在播放按钮前面有一个很大的空间吗?

更新

我按照Fraxtil的建议做了这个:

  

使用position:absolute; margin-top:-250px;似乎是你正在寻找的解决方案。

也是左:375;

..而且有效,

但是不会让div 2总是在那里吗?如果表格改变页面上的位置怎么办?我可以这样做,所以它可以某种方式直接与表位置相关吗?

2 个答案:

答案 0 :(得分:0)

使用position: absolute; margin-top: -250px;似乎是您正在寻找的解决方案。

答案 1 :(得分:0)

为了回应你的更新,div会根据它的直接容器进行移动,这是很多人都不知道的事情,因为它并不是那么明显。

如何定位绝对物品

绝对,作为定位模式,指定要从正常文档流中移除定位项,绝对相对于其容器在文档流中的位置定位,并将其下方的任何项向上移动。

您指定的坐标是偏移,而不是绝对位置。也就是说,你说,“向左移动20像素,向上移动15”。你不是说“从左边转到像素位置20,从左边转到15。”如果你说第二个条件,那么div将永远不会从位置20x15移动,你就会遇到问题。 (请注意,您也可以在此处使用宽度和高度。)

您的“绝对”定位元素实际上相对定位到其容器。浏览器负责使用样式表中指定的样式信息确保它们保持在彼此的指定距离内。

如何识别容器

现在,问题变成,偏离什么?这就是诀窍。通常,这是元素的直接容器。但事情并非那么简单。无论何时将定位应用于元素,该元素都将成为容器。困惑了吗? :)

绝对定位元素的包含块是:

  • 最近的祖先(绝对定位元素之外的最近元素,其位置为固定,绝对或相对), - 或 -
  • 初始包含元素(浏览器窗口)。

如果您的元素未放置在另一个定位的元素中,则其容器很可能是窗口。 使其行为类似于具有固定位置的元素,并且它不会移动。 (好吧,它可能:但相对于窗口的左侧和顶部,这可能不是您想要的。)


This tutorial (not mine)很好地涵盖了CSS定位。它很长,并且有一个烦人的巫术界面,但它完成了工作。