css - 頂部過去的父元素

我使用頂部的屬性，使div開始在其父母的頂部，並在底部結束。底部正在工作。不過出於某種原因，頂端開始回到父母的雙親身上。這裏是我的代碼：css - 頂部過去的父元素

<div class="right"> 
    <div class="boxx details-history"> 
     <div class="boxx-content"> 
      Box content goes here 
     </div> 
    </div> 
    <div class="boxx details-coursework"> 
     <div class="boxx-content custom-scroll"> 
      Box content goes here 
     </div> 
    </div> 
</div>

這裏是CSS：

.details-coursework .boxx-content { padding: 0 0 0 0!important; position: absolute; 
    bottom:0; top: 0; }

自頂：0， '.details-課程.boxx內容' 應該開始在「BOXX細節，課程的頂部」。問題是'.details-coursework .boxx-content'從class = right開始。它的父元素是'boxx details-coursework'，所以這就是應該設置頂部的地方。我該如何解決？

下面是一些其他的CSS BOXX，但我不認爲這是相關的：

.boxx { margin-top:11px; } 
.boxx:first-child { margin-top:0; } 
.boxx .boxx-content { background: #fff; padding:4px 18px; color:#a7a7a7; 
    font-family: 'Roboto', sans-serif; font-weight:300; border-radius: 0 0 3px 3px;  }

這裏是一個的jsfiddle。我包含了一些更多的代碼，這樣我就可以更清楚地看到我正在做什麼。看看右下角塊，看看有什麼我試圖做的事：

http://jsfiddle.net/3ycGZ/

來源

2014-02-12 Philip7899

如果你可以提供一個jsfiddle所有的代碼和樣式，我們可以進一步診斷 –

好主意，我現在做一個。 – Philip7899

我加了一個jsfiddle – Philip7899

爲了相對孩子定位到父，你需要聲明的是，父母的位置是相對的。我相信這應該解決你的問題。

.boxx.details-coursework { 
    position: relative; 
}

來源

2014-02-12 23:45:50

謝謝，它使它從頂部開始，但現在它不再一直走到底部... – Philip7899

您需要根據您想要前往的道路來指定「height」或「bottom」CSS屬性。 –

@HenrikAmmer是正確的。也許'身高：100％;'？ –

ginowa320是正確的。絕對定位的元素使用第一個非靜態定位元素作爲參考。你可以在這裏看到一個例子：W3Schools css positioning example

來源

2014-02-12 23:54:14

我建議使用CSS技巧來解決這個問題，http：//css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/。在任何一天，都會比w3schools更好。 –

css - 頂部過去的父元素

回答

相關問題