Question

我整个上午都在努力写出我认为简单的代码。

两列长内容，只有第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>

Answer 1

绝对定位会从页面流中删除项目。这就是导致你的底部div出现在下面的原因。

可见性从视线中移除元素，但元素仍将占用空间。

我的建议是使用显示而不是可见性。

在display:block和display:none之间切换元素并删除绝对定位，您应该能够实现所需的功能。

Answer 2

＃borad-list和#school-list都是按照正常的页面流量取出的位置：绝对值，这就是为什么你的容器高度应该是0px，因为没有任何东西可以垂直占用任何空间。

我可以更好地解释一下，但现在用手机写字......我会尽量给你起点。

Answer 3

通过使用position:absolute定位容器，您将从正常的页面流中删除它们。换句话说，您的其他内容就像那些容器甚至不存在一样，并且这些容器神奇地出现在内容的前面。

相反，您可能要做的是删除容器的位置，顶部和左侧，并使用display:block显示并display:none隐藏容器。您还可以从容器中移除高度，并允许内容自行决定需要多少空间。

混淆了DIV Z-index，加上可见/隐藏DIV的逻辑

3 个答案: