CSS margin-top和top沒有綁定

我有一個頁面浮動背景圖像（絕對定位），其中的圖像是通過javascript動態更改的麻煩。基本上，這是一個投資組合背後變化的大畫廊：CSS margin-top和top沒有綁定

我有標記的部分看起來像這樣：

<div class="content"> 
    <div class="content-container"> 
    <div class="content-image"> 
     <img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/> 
    </div> 
    ...etc...

下面是相關的CSS類：

.image-resize { 
    position: absolute; 
    min-height: 750px; 
    min-width: 1000px; 
    width: 100%; 
    left: 0; 
    text-align: left; 
    vertical-align: middle; 
    margin-top: -25%; 
    top: 25%; 
} 

.content-image { 
    position: absolute; 
    top: 0; 
    left: 200px; 
    width: 100%; 
    min-height: 750px; 
    max-height: 750px; 
    min-width:1000px; 
    overflow:visible; 
    opacity: 0.5; 
    z-index: 1; 
} 

.content-container { 
    position: relative; 
    min-height: 750px; 
} 

.content { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    max-height: 750px; 
    overflow: hidden; 
    background: purple; 
    z-index: -5;  
}

這是所有絕對定位，以便我可以用Javascript替換圖像源，然後動態調整容器大小（背景）以填充新內容。有最小範圍，所以它總是有一個大小。

我想要做的是將這個圖像固定到一箇中心點，這樣當它調整大小時，圖像的有趣部分（很少是左上角）會顯示出來。

在鉻我看到top和margin-top從來即使它們具有相同的（百分比）相同的數值檢查員。我在這裏錯過了什麼？

例如： top: 187.5px和margin-top：-389.5px。它看起來好像margin-top使用img-source分辨率，並且top爲我的生活使用某些東西，我無法弄清楚 - 我假設min-height +頁面中的偏移量？

在這裏的任何幫助將不勝感激，這是設計的一個相當大的部分，我很想擁有它比它更好。

瀏覽器：Chrome的版本：30.0.1599.66米的Android瀏覽器：30.0.1599.82

來源

2013-10-03 Daniel B. Chapman

看起來像top是margin的一半......如果您只需要chrome支持，請使用calc（）而不是abspos。 – dandavis

這將最終是跨瀏覽器，這只是最初的規範（鉻我的經驗調試更快） –

仍然，你可以在IE和FF做同樣的事情。舊的IE使用稍微不同的表達式語法，但它也可以規定你需要在CSS中的值。 – dandavis

這確實解決在Chrome中的問題 - 但我想知道爲什麼它使用1000像素的基線而不是單位的750px。

/*Hack of a vector similar to 50%*/ 
margin-top: calc(-50% * 0.75); 
top: 50%;

來源

2013-10-03 20:30:36

CSS margin-top和top沒有綁定

回答

相關問題