絕對定位不起作用

所以我正在使用引導，然後我有這個圖像，我想把它放在頁面的右上部分，但它似乎position:absolute不工作，所以我不知道我在做什麼，在這裏失蹤了。我GOOGLE了很多次，但給我沒有運氣，我有相同的代碼壽。而且我也嘗試了一些替代方法或提示和技巧，但仍然無法使用。所以這裏是我的代碼html。絕對定位不起作用

<body> 
    <img id="swirl-left" src="assets/images/swirl1-panel1.png"> 
    <img id="swirl-right" src="assets/images/swirl2-panel1.png">

這是我的圖片的HTML結構，我有這個CSS：

#swirl-left { position:absolute; left:0; top:-10px;z-index: 2;} 
    #swirl-right { position:absolute; right:0;top:-11px; z-index: 1;}

我試圖float:right但仍然無法使其工作。截至目前，我得到了這個輸出。

enter image description here

所以，當我重新大小的瀏覽器，它去它與它。我想停留在頁面的右上角部分。我錯過了什麼？如果我調整瀏覽器，圖像隨之移動。這需要我一個小時，所以任何幫助都會被處理。

來源

2014-10-19 user3093453

請創建一個代碼片段，一個jsFiddle或發佈一個鏈接到您的網站。 – 2014-10-19 17:15:49

您的代碼works just fine可以將圖像固定到左上角和右上角，如果圖像小於身體標記。

您使用的圖像有多大，以及您的<body>有多寬？您沒有設置任何特定值，因此圖像以全尺寸顯示。

您的「輸出」圖像看起來像所有圖像都與身體大小相同，因此它們只是堆疊在一起。

如果你給他們在CSS中的所有特定的寬度/高度屬性，它應該工作。在這2nd example，圖像實際上是500x500，它將以全尺寸重疊，但CSS width屬性使它們適合正確。您可以使用固定的像素值，或者如果您希望圖像具有響應性，則可以使用百分比。

body { 
    width: 900px;  
} 

#swirl-left { 
    width: 150px; 
    position:absolute; 
    left:0; 
    top:-10px; 
} 

#swirl-right { 
    width: 150px; 
    position:absolute; 
    right:0; 
    top:-10px; 
}

或者，因爲你使用的引導，你可以使用你的img標籤類來描述大小&＃你想要的形象佔據，像col-sm-2或東西列。

<img id="swirl-left" class="col-sm-2" src="assets/images/swirl1-panel1.png"> 
<img id="swirl-right" class="col-sm-2" src="assets/images/swirl2-panel1.png">

來源

2014-10-19 17:18:13 mc01

但是，爲什麼在重新調整圖像的尺寸時會如此。它不會卡在一個地方。 – user3093453 2014-10-19 17:30:33

絕對定位不起作用

回答

相關問題