把絕對位置div超過最後一個圖像

-1

我有以下代碼，它的目標是我的Wordpress文章中的最後一個圖像，並把它放在#first-img上，它只留下其他圖像。把絕對位置div超過最後一個圖像

<div id="s-img" class="row">  
    <?php 
     preg_match_all('/(<img [^>]*>)/', get_the_content(), $images); 
     for($i=0; isset($images[1]) && $i < count($images[1]); $i++) { 
     if ($i == end(array_keys($images[1]))) { 
     echo sprintf('<div id="last-img">%s</div>', $images[1][$i]); 
     continue; 
     } 
      echo $images[1][$i]; 
     } 
    ?> 
</div>

CSS

#last-image { 
    position: absolute 
    height: 50px; width: 50px; 
    background-color: red; 
}

問題是，我希望它把#first-img ON-TOP的圖像，並留下圖像本身孤單。現在它取代了圖像。

呈現的HTML - 上的圖像和最後一個影像

<div id="s-img" class="row">   
<img class="alignnone size-large wp-image-396" src="http://localhost/wordpress/wp-content/uploads/2015/12/img3-1008x720.jpg" alt="img3" height="720" width="1008"> </img> 
</div> 

<div id="last-img"> 
<img class="alignnone size-large wp-image-397" src="http://localhost/wordpress/wp-content/uploads/2015/12/img4-1080x720.jpg" alt="img4" height="720" width="1080"></img> 
</div>

來源

2016-03-13 user3550879

請後從瀏覽器中呈現的HTML，因爲 –

請複製並粘貼屏幕快照將不利於調試的問題，感謝 –

添加到'.row' DIV PHP代碼不會是有用的 - '位置：relative' –

問題是，我希望它把＃第一IMG在最上層的圖像，並獨自離開圖像本身

究竟是什麼你想在這裏實現什麼？我沒有看到你輸出任何額外的文本內容（如f.e.圖像描述），所以我假設你只是想在圖像上覆蓋一個空元素，以應用某種CSS效果（背景顏色）？

如果是這樣，你應該可以使用僞元素 - 而不是圖像本身（因爲具有空內容模型的元素不能具有這些元素），但是在放置圖像的div容器上：

#last-image { 
    position: relative; 
    /* display:line-block; */ /* you might need to add that, */ 
         /* if the image is not covering full width */ 
} 
#last-image:after { 
    content: ""; 
    position: absolute; 
    top: 0; left:0; right:0; bottom:0; /* automatically stretch */ 
            /* to full parent width/height */ 
    background-color: red; 
    z-index: 1; /* might not be necessary, depends on rest of CSS */ 
}

來源

2016-03-13 10:11:13 CBroe

它寫的方式＃最後一個圖像連接到圖像。我在帖子中有多個圖片。我不想改變圖像的CSS，我只是想把一個div放在最後一個。所有應用於＃last-img的CSS僅應用於最後一張圖像頂部的div。不是圖像本身。這是它現在的問題 – user3550879

你甚至嘗試過我建議的嗎？如果是這樣，你的要求哪部分不符合？ – CBroe

我有和沒有變化，圖像仍然沒有顯示在頂部（我已經嘗試過，沒有評論部分） – user3550879

-1

的z-index將「上面」所有其他的圖像，以及「上面」所有其他網頁元素將具有較低的z-index。

#first-img { 
z-index: 999; 
}

來源

2016-03-13 09:41:07

問題在於，由於連接了 – user3550879

，我還會發布最後一張圖片的最後一張圖片嗎？我明白＃first-img應該放置在絕對位置上方。或者你想要將它按順序放在其他圖像之前，就像'appendChild（）'一樣。看起來我的誤解花了我一個負面。希望人們能夠儘快提供建設性的東西，而不是僅僅吐痰毒液。 –

我不知道爲什麼要麼，我的問題是，＃first-img也與圖像鏈接，所以如果我更改z索引，如果影響圖像和其他任何。我需要div來分開。瞄準最後的圖像，但不要改變它。我希望CSS應用到它的頂部 – user3550879

把絕對位置div超過最後一個圖像

回答

相關問題