1

午前中ずっと、単純なコードだと思っていたものを書き込もうとしました。

  • コンテンツの 2 つの長い列、列 1 のみが表示されます
  • リンクをクリックすると、列 1 が非表示になり、列 2 が表示されます
  • どちらもまったく同じ位置にありますが、長さが異なります。

疑似クラスを使用しtargetて列を切り替え、1 つの可視性を表示するように設定することにしました。

これは機能しているように見えますが、自分が何をしたかを完全には理解していません。さらに、これらの列の下にあるコンテンツは、y 軸ではなく、z 軸でそれらの下に配置されているようです。

私の2つの（関連する）問題：

  1. 私が作成したもののロジックが正確にはわかりません。わかりやすい英語の説明でできます。
  2. 2 つの列とコンテナーの下にある 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>
4

3 に答える 3

3

絶対配置は、ページの流れからアイテムを削除します。これが、一番下の div が下に表示される原因です。

可視性により要素が見えなくなりますが、要素は依然としてスペースを占有します。

私の提案は、可視性ではなく表示を使用することです。

display:block要素をとの間で切り替えてdisplay:none、絶対配置を削除すると、必要な機能を実現できるはずです。

于 2012-05-03T19:54:49.880 に答える
0

#borad-list と #school-list は両方とも、位置によって通常のページ フローから取り出されます: 絶対位置です。垂直方向にスペースを取るものがないため、コンテナの高さを 0px にする必要があります。

私はそれをもっとうまく説明することができましたが、今は私の電話で書いているので... 私はあなたに出発点を与えようとします.

于 2012-05-03T19:56:11.940 に答える
0

を使用してコンテナーを配置することによりposition:absolute、ページの通常の流れからコンテナーを削除します。つまり、他のコンテンツはそれらのコンテナーが存在しないかのように機能し、それらのコンテナーは魔法のようにコンテンツの前に表示されます。

代わりに、コンテナの位置、上、左を削除し、 を使用display:blockしてコンテナを表示および非表示にすることをお勧めしますdisplay:none。コンテナから高さを削除して、コンテンツが必要なスペースを独自に決定できるようにすることもできます。

于 2012-05-03T19:57:01.820 に答える