Question

几乎就是标题。

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

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

我真的需要知道，所以我可以解决图像之间的碰撞，并实际上将对象放在除矩形之外的游戏边界中。我现在正在修修补补，但这会节省我很多时间，如果有人能让我确切知道，我会觉得更安全。

我在div中有一个图像，我在div的style属性中设置所有css属性，包括bottom，left，height和width

谢谢！

Answer 1

您设置了top和left ...这是您要素的 top 和 left 的空间大小绝对重新定位。现在，如果你没有给它一个宽度和高度，你可以使用bottom和right来使它占用所有空间，除了你在那些样式属性中指定的任何内容。

一个简单的demo应足以说明这一点......

我应该提到绝对意味着身体的起源绝对（页面的左上角）。例外情况是绝对定位元素的父元素为position: relative时请参见demo

Answer 2

在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/。< / p>

CSS：绝对定位，实际位于图像中的图像的（绝对）坐标在哪里？

2 个答案: