CODEWITHSUNDEEP
htmlcssz-index
Olly F
Olly F

Reputation: 2869

Confused over DIV Z-index, plus logic of visible/hidden DIVs

I've spent all morning trying to write what I thought was a simple bit of code.

I decided to use the target pseudo-class to switch between the columns, setting the visibility of one to show.

This seems to work, but I don't fully understand what I've done. Plus, content below these columns seems to be placed beneath them on the z-axis rather than below them on the y-axis.

My two (related) issues:

  1. I'm not sure exactly what the logic is of what I've created, I could do with a plain english explanation.
  2. I don't understand why the DIV underneath the two columns and container is not appearing below them on the y-axis.

Here's my 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;
}

Here's my 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>

Upvotes: 1

Views: 3983

Answers (3)

David Millar
David Millar

Reputation: 1878

By positioning the containers using position:absolute, you're removing them from the normal flow of the page. In other words, your other content acts like those containers aren't even there, and those containers magically appear in front of the content.

Instead, what you'll likely want to do is remove the position, top, and left of the containers, and use display:block to show and display:none to hide the containers. You can also remove the height from the containers and allow the content to decide on its own how much room is needed.

Upvotes: 0

Sampo Sarrala
Sampo Sarrala

Reputation: 4888

Both #borad-list and #school-list is taken out of normal page flow by position: absolute, that's why your container height should be 0px as there is nothing that takes any space vertically.

I could explain it better but now writing with my phone so... i'll try just to give you starting point.

Upvotes: 0

Jared
Jared

Reputation: 12524

Absolute positioning removes an item from the flow of the page. This is what is causing your bottom div to appear underneath.

Visibility removes the element from sight but the element will still take up space.

My suggestion is to use display rather than visibility.

Toggle your elements between display:block and display:none and remove the absolute positioning and you should be able to achieve the functionality you desire.

Upvotes: 3

Related Questions