CSS Project Broadway

Here is the point that I don’t understand.

Question:
10.

Great work, the Broadway Design site looks much better!

If you want to continue coding, challenge yourself to make the <footer> element also fixed to the bottom of the page regardless of scrolling.

Answer:
footer {

background-color: #333;

color: #fff;

padding: 30px 0;

position: fixed;

z-index: 1;

bottom: 0;

width: 100%;

}

When I set the position to fixed, why the footer disappear?
Why I have to set z-index and bottom to make it works?

Any advice is greatly appreciated! :slight_smile:

The z-index property makes it come up above the element on it, so it can be visible. This is more like layers in a graphic design application such as Adobe Illustrator, where items have to be arranged in layers, depending on how you want them to appear.

The bottom = 0 property positions it at 0px position from the bottom position - simply telling CSS where exactly to position the footer at the bottom.

1 Like

so can I say position fixed is used definitely with z-index and bottom/top/left/right ???

Not compulsorily. .z-index

Take the image illustration as an example. Blue element is on top of the Red element. Blue would be seen first before the red. Blue can totally mask or cover the red.

Another example is;
Just imagine that you dropped a book (book 1) on a table and then dropped another book (book 2) on top of the previous book. If someone was looking at these books from the ceiling of the house, the first book they’ll see would be the second book (book 2). This means that book 2 is at top of the stack. In this case, book 2 has a z-index of 1 while book 1 has a z-index of 0

Got it ! Thanks! :slight_smile: really appreciate your advice!