無法讓文本保持定位

我試圖設計一種博客佈局，但博客標題（條目內容）與博客有較長的標題而不是推向下段落時的摘錄段落重疊。我怎樣才能讓它不重疊？這裏感謝它是如何看起來重疊。 http://rebelde.website/test6/blog/無法讓文本保持定位

.brick img { 
    clear: both; 
    display: block; 
    float: none; 
    height: 200px !important; 
    margin-bottom: 50px; 
    mix-blend-mode: inherit; 
    position: relative; 
    z-index: 1; 
} 


.brick .entry-title { 

    font-size: 40px; 
    font-family: oswald; 
    font-weight: 700; 
    color: #000; 
    position: absolute; 
    float: right; 
    top: 227px; 
    clear: both; 
} 



p { 
    color: #072701; 
    display: block; 
    font-family: oswald; 
    margin: 0 0 16px; 
    overflow: auto; 
    padding-left: 10px; 
    padding-right: 1px; 
    position: relative; 
    clear:both; 
}

來源

2016-01-15 subversiv

當試圖向我們展示了什麼是錯的，你永遠不應該鏈接到一個網站，但網上爲我們創建一個工作示例審查。既然你可能會解決這個問題，沒有人能夠看到實際問題是什麼，從而使整個問題變得毫無用處。我建議去[JSfiddle]（http://jsfiddle.net/）創建一個工作示例。 –

這裏有幾件事情可以改進。要讓文字動態移動，您應該從h2中刪除position: absolute。絕對定位的元素永遠不會「隨流而動」。他們不影響其他元素。當你刪除它時，你會看到h2將轉到文章塊的頂部。這是因爲您的文章塊的層次結構如下所示

<article> 
    <header> 
    <h2></h2> 
    </header> 
    <content> 
    <img> 
    <p></p> 
    </content> 
</article>

正如您所看到的。您的h2位於標題內，並且img和p位於內容塊內。我還製作了一段代碼截圖，突出了我正在談論的內容。

你將不得不把img（包括它的直接父a）的h2之前，它可能會被修復。

希望這有助於

來源

2016-01-15 01:01:58

感謝您的回答。對不起，但我迷路了。我刪除了絕對標籤，並將頂部底部的img移到了頂部，但它對我來說看起來仍然相同 – subversiv

如果看起來相同，那麼您實際上並未移除「絕對」標籤。當我在您的網站上使用開發者模式進行操作時，單獨刪除此標籤會導致一些嚴重的錯位。試試看看你是否刪除了正確的代碼行。也許你必須重新同步你的網站上的服務器的文件 –

謝謝。是的，H2回到了頂端。但是我嘗試了position：relative並嘗試將它移下來，它現在在圖像後面 – subversiv

無法讓文本保持定位

回答

相關問題