絕對定位用於動態創建的元素

我試圖覆蓋文本到已經使用使用document.createElement（）函數被動態創建超鏈接的圖像。然而，即使有絕對位置左：0像素和頂：0像素，文本繼續出現在圖像的下方，而不是上方，左上角，因爲它應該：絕對定位用於動態創建的元素

//mainDiv is a container to hold all the hyperlinked images 
    for (i = 0; i < imgArray.length; i++) 
    { 
     img = document.createElement("img"); 
     img.src = imgArray[i].src; 
     img.style.width = imgArray[i].wdth; 
     img.style.height = "auto"; 

     imgLink = document.createElement("a"); 
     imgLink.href = imgArray[i].url; 
     imgLink.appendChild(img); 

     imgLabel = document.createElement("p"); 
     imgLabel.innerHTML = imgArray[i].desc; 
     imgLabel.style.position = "absolute"; 
     imgLabel.style.top = "0px"; 
     imgLabel.style.left = "0px"; 

     imgContainer = document.createElement("div"); 
     imgContainer.style.display = "inline"; 
     imgContainer.style.position = "relative"; 

     imgContainer.appendChild(imgLabel); 
     imgContainer.appendChild(imgLink); 
     mainDiv.appendChild(imgContainer); 
    }

唯一的問題是文本div的定位，imgLabel。

這裏的問題上的jsfiddle一個簡單的例子：http://jsfiddle.net/mPL3q/1/

塊& inline-block的不工作：http://jsfiddle.net/MwjXV/

來源

2014-07-09 iSofia

你這是什麼意思'覆蓋text'？你能添加更多細節嗎？或創建一個小提琴？ –

試圖向我們展示的小提琴，請您 – MickyScion

例如要顯示在圖像上一些文字。 – iSofia

1解決方案

// label 
imgLabel.style.position = "absolute"; 
imgLabel.style.top = "0px"; 
imgLabel.style.left = "0px"; 
imgLabel.style.margin = '0px'; 

// container  
imgContainer.style.position = "relative"; 
// tip: parent element of another element containing floated elements 
//  should have property overflow set to hidden 
imgContainer.style.float = "left"; 
imgContainer.style.margin = "5px";

第2解決方案

// label 
imgLabel.style.position = "absolute"; 
imgLabel.style.top = "0px"; 
imgLabel.style.left = "0px"; 
imgLabel.style.margin = "0px"; 

// container   
imgContainer.style.display = "inline-block"; 
imgContainer.style.position = "relative"; 
// you will have gaps between the containers even if the margin is set to 0 
imgContainer.style.margin = "0px"; 
// if you don't want these gaps, set margin-left to -5px (but not to the first element) 
if(i !== 0){ 
    imgContainer.style.marginLeft = "-5px"; 
}

EDIT分析你的代碼後...

// change <p> to <label> 
imgLabel = document.createElement("label"); 
imgLabel.innerHTML = "Image " + i; 
imgLabel.style.left = "0px"; 
// you don't need the next line ;) 
//imgLabel.style.top = "0px"; 
imgLabel.style.color = "White"; 
imgLabel.style.position = "absolute";

1st jsFiddle | 2nd jsFiddle | 3rd jsFiddle

來源

2014-07-09 17:14:46 hex494D49

增加zIndex的沒有解決的問題。 – iSofia

@iSofia檢查[的jsfiddle]（http://jsfiddle.net/mPL3q/9/） – hex494D49

容器元件設置爲*的位置是：相對於*和標籤元件設置爲*的位置是：絕對* 0餘量。但是，如果容器元素未以內聯方式顯示，則超鏈接的圖像將垂直顯示，而不是並排顯示。 – iSofia

你可以做到這一點，添加

img.style.zIndex="1";

和

imgLink.style.display = "block";

各自塊

http://jsfiddle.net/mPL3q/8/

如果inline-block作品你再

imgContainer.style.display = "inline-block";

http://jsfiddle.net/mPL3q/7/

來源

2014-07-09 17:43:16 Huangism

由於某些原因，對鏈接元素或容器元素使用* block *或* inline-block *可防止圖像並排顯示。 – iSofia

你將不得不張貼更多的代碼，然後 – Huangism

**（編輯jsFiddle：）** http://jsfiddle.net/mPL3q/10/ – iSofia

絕對定位用於動態創建的元素

回答

相關問題