困惑過DIV Z-指數，加上可見/隱藏層

我花了整個上午都在試圖寫了我認爲是一個簡單的代碼位的邏輯。困惑過DIV Z-指數，加上可見/隱藏層

兩個長的內容列，只有第1欄是可見的
上的鏈接的點擊，第1列是隱藏的，第2列變得可見
兩者都是完全相同的位置，但都有不同和不同的長度

我決定使用target僞類在列之間切換，設置要顯示的可見性。

這似乎工作，但我不完全明白我所做的。此外，這些列下方的內容似乎放置在z軸下方，而不是在y軸下方。

我的兩個（相關）的問題：

我不完全知道什麼是邏輯的，我創造了什麼，我可以用一個簡單的英語解釋這樣做。
我不明白爲什麼在兩列和容器下面的DIV沒有出現在y軸下面。

這裏是我的CSS：

#container 
{ 
    background-color: red; 
    position: relative; 
} 

#schools-list 
{ 
    width: 400px; /* Set the width of the visible portion of content here */ 
    height: 600px; /* Delete the height, let the content define the height */ 
    background-color: purple; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#boards-list 
{ 
    width: 400px; /* Set the width of the visible portion of content here */ 
    height: 700px; /* Delete the height, let the content define the height */ 
    background-color: green; 
    position: absolute; 
    top: 0; 
    left: 0; 
    visibility: hidden; 
} 

#container:target #schools-list 
{ 
    visibility: hidden; 
} 

#container:target #boards-list 
{ 
    visibility: visible; 
}

這裏是我的HTML：

<div id="container"> 

    <div id="boards-list"> 
    Boards List<br> 
    Switch to <a href="">Schools List</a> 
    Here's some content 
    </div> 

    <div id="schools-list"> 
    Schools List<br> 
    Switch to <a href="#container">Boards List</a> 
    Here's some other content 
    </div> 

</div> 

<div>Why is this beneath everything?</div>

來源

2012-05-03 Olly F

嘗試在兩個列表容器中添加'clear：both;'。 –

絕對定位從頁面的流量中刪除的項目。這是什麼導致你的底部div出現在下面。

可見性將元素從視線中移除，但元素仍佔用空間。

我的建議是使用顯示而不是能見度。

在display:block和display:none之間切換您的元素並刪除絕對定位，您應該能夠實現您所需的功能。

來源

2012-05-03 19:54:49 Jrod

很好的解釋。這裏有一個jsfiddle頁面來演示解決方案http://jsfiddle.net/LR9cV/ –

很好的解釋Jrod，非常感謝你。和科迪，感謝jsfiddle。 –

＃borad-list和＃school-list都是從正常頁面流出的位置：絕對的，這就是爲什麼你的容器高度應該是0px，因爲沒有任何東西需要垂直空間。

我可以更好地解釋，但現在我的電話所以寫...我會嘗試只是給你的起點。

來源

2012-05-03 19:56:11

通過使用position:absolute來定位容器，您將它們從正常的頁面流中移除。換句話說，您的其他內容就像那些容器甚至不在那裏一樣，這些容器奇蹟般地出現在內容的前面。

取而代之，您可能想要執行的操作是移除容器的位置，頂部和左側，並使用display:block顯示並使用display:none來隱藏容器。您也可以從容器中取出的高度，並允許內容多少房間都需要自己決定。

來源

2012-05-03 19:57:01

困惑過DIV Z-指數，加上可見/隱藏層

回答

相關問題