CSS layout, flexbox

Question

The "red" div (seen in the image) is in the "head" div. I'm using flexbox to positioning simply like that:

#head {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

I want to overflow the red to the gray area like in the picture. How can I do that?

Create a separate div for red part, and then: https://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page — Tom Brooke, May 06 '22 at 08:36
A negative `margin-bottom` for the red div will probably do the trick. You might need to modify the `z-index` as well, so that the grey #body content does not overlap it. — CBroe, May 06 '22 at 08:48

score 2 · Answer 1 · answered May 06 '22 at 08:51

2

Apply one of these rules

#red {
  transform: translateY(50%);
}

or

#red {
  position: relative;
  top: 50px;
}

answered May 06 '22 at 08:51

1900 TD Lemon

1 Answers1