元素定位。在定位（不變換）時更改基點（左上角）

Question

定位元素時遇到錯誤。 瀏覽器通過查看它們的左上角來計算元素的位置。

可以說這一點（左上角）「基礎」（對術語感到抱歉） 當我使用對齊或居中對象時，它工作正常。但是，如果我使用其他屬性更改元素的位置，可以說width：％50和height：％50，但瀏覽器不會將元素移動到中間，它會將元素的「基礎」移動到中間。

有沒有辦法將此「基礎」更改爲元素的其他位置？ 例如，我可以製作元素右下角的「基礎」嗎？

Answer 1

我想我明白你想問什麼。總之，答案是否定的。但是，如果您使用絕對定位，看看這個簡單的測試：

HTML

<div class="wrap"> 
    <div class="absolute"> 
    </div> 
</div> 

CSS

.wrap { 
    position: relative; 
    width:400px; height:400px; 
    background: red; } 

.absolute { 
    position: absolute; 
    bottom:0; right:0; 
    width:100px; height:100px; 
    background: blue; } 

您應該看到div.absolute是基於它定位成右下方角。絕對定位可以這種方式使用。請看這裏的小提琴：http://jsfiddle.net/3RqSS/

否則，您需要使用絕對定位和邊距的組合來居中。例如。

.absolute { 
     position: absolute; 
     top:50%; left:50%; 
     width:100px; height:100px; 
     margin-left: -50px; 
     margin-top: -50px; 
     background: blue; }