CSS：絕對定位，其中是實際位於圖像中的圖像的（絕對）座標？

非常標題。我正在設計一個基於絕對定位的JavaScript遊戲引擎，我真的需要知道絕對定位座標本身是否位於圖像的中心（這可能太棒了！），或者在其中一個角落，但如果是這樣，哪個角落？CSS：絕對定位，其中是實際位於圖像中的圖像的（絕對）座標？

我認爲這是左上角，但我不確定。

我真的需要知道，所以我可以計算出圖像之間的碰撞，並且實際上給出了除了矩形之外的遊戲邊界中的對象。我現在正在修補，但它會爲我節省很多時間，如果有人能夠肯定地告訴我，我會感到更安全。

我有一個圖像中的DIV，和我設置在div，包括底部，左側，高度的樣式屬性的所有CSS屬性，和寬度

謝謝！

來源

2012-07-31 OneThreeSeven

您設置top和left ...這是多大的空間在頂部給予和離開你絕對定位元素的。現在如果你不給它一個寬度和高度，你可以使用bottom和right來使它佔據除了你在這些樣式屬性中指定的任何空間之外的所有空間。

一個簡單demo應足以說明這...

我應該指出，絕對意味着絕對對身體的原點（左上頁的角落）。唯一的例外是當你的絕對定位的元素的父元素是position: relative看到這個demo

來源

2012-07-31 01:36:47 sachleen

Awsome！謝謝。 – OneThreeSeven 2012-07-31 01:59:07

看看這個：http://jsbin.com/opogep/6。它顯示（絕對）座標取決於我使用底部設置物體時的高度。所以我猜絕對座標總是在包含元素的左上角，當我用底部定位時，總是在左上角，而不管當我用頂部定位時。 – OneThreeSeven 2012-07-31 02:22:05

不，當你使用底部的時候，它會是來自元素底部的許多像素。這些屬性只是說''''方向''X'px「。 logo2和point2都位於左上方，因爲它們具有相同的頂部和左側位置。標誌和點位於底部和左側，因爲它們具有相同的底部和左側位置。現在，因爲徽標比點高，所以它更「上」，但左下方的位置仍然是樣式中定義的相同。 – sachleen 2012-07-31 03:12:13

在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）。

簡單的測試：如果你做的.wrapper0的left和top值，則該框爲半停產：http://jsfiddle.net/tbRfm/3/。

來源

2012-07-31 03:43:45

CSS：絕對定位，其中是實際位於圖像中的圖像的（絕對）座標？

回答

相關問題