Fixing your header issue, please help me understand


#1


https://www.codecademy.com/en/courses/web-beginner-en-9x6JW-WnAFv/0/4?curriculum_id=50579fb998b470000202dc8b

the problem I'm having is understanding why the left div element is not visible when i change the header position to fixed. if i change it to top or eliminate position altogether, the left float is visible. i am able to save and submit. why is this? thanks for any help


div {
    border-radius: 5px;
    height: 20px;
    width: 80px;
    background-color: blue;
}

#header {
    position: fixed;
    z-index: 1;
}

.left {
    float: left;
}

.right {
    float: right;
}

#footer {
    clear: both;
}


#2

because the .left disappears behind the header. Normally, blocks (divs are block level elements) will side below each other, how ever, this "flow" isn't followed when you make a element fixed.

You could push your .left (and right) down, by adding:

.left, .right {
  margin-top: 20px;
}