2

几乎是标题。

背景故事：我正在设计一个基于绝对定位的javascript游戏引擎，我真的需要知道绝对定位坐标本身是否在图像的中心（这太棒了！），或者在一个角落，但是如果有，在哪个角落？

我认为它是左上角，但我不确定。

我真的需要知道，这样我才能计算出图像之间的碰撞，并实际给出游戏边界中的对象而不是矩形。我现在正在修修补补，但这会节省我很多时间，如果有人能确定地告诉我，我会感到更安全。

我在 div 中有一个图像，我在 div 的 style 属性中设置所有 css 属性，包括底部、左侧、高度和宽度

谢谢！

4

2 回答 2

3

您设置topand ... 那就是在您绝对定位的元素的顶部和左侧left提供多少空间。现在，如果你不给它一个宽度和高度，你可以使用and让它占据所有空间，除了你在那些样式属性中指定的任何内容。bottomright

一个简单的演示应该足以说明这一点......

我应该提到绝对意味着绝对的身体原点（页面的左上角）。例外情况是当您的绝对定位元素的父元素是position: relativeSee this demo

于 2012-07-31T01:36:47.950 回答
1

在 CSS 中，left表示元素与父元素左侧之间的距离，例如<body>，或带有 的元素position: relative。

其他的也一样，例如bottom表示离底部边缘多远。

但是，我做了一个允许从中心定位的示例：http: //jsfiddle.net/tbRfm/1/。

HTML：

<div class="wrapper">
    <div class="inner">
        Inner stuff here, or set a <code>background-image</code>.
    </div>
</div>

CSS：

.wrapper {
    position: relative;
    left: 200px;
    top: 100px;
    width: 100px;
    height: 100px;
}
.inner {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 50px;
    bottom: 50px;
    background: #eee;
    text-align: center
}

这适用于所有 IE 版本（至少我可以在IE NetRenderer测试的版本：IE5.5 - IE10）。

简单测试：如果您设置left和的top值.wrapper 0，则该框将被截断：http: //jsfiddle.net/tbRfm/3/。

于 2012-07-31T03:43:45.343 回答