City-Skyline Step-91 About understanding Overflow

HTML-CSS
1

HTML:

<div class="fb3 building-wrap">
     <div class="fb3a window-wrap">
         <div class="fb3-window"></div>
         <div class="fb3-window"></div>
         <div class="fb3-window"></div>
     </div>
     <div class="fb3b"></div>
     <div class="fb3a"></div>
     <div class="fb3b"></div>
</div>

CSS:

:root {
  --building-color1: #aa80ff;
  --window-color1: black;
}

.fb3 {
  width: 10%;
  height: 35%;
}
  
.fb3a {
  width: 80%;
  height: 15%;
  background-color: var(--building-color1);
}
  
.fb3b {
  width: 100%;
  height: 35%;
  background-color: var(--building-color1);
}

.fb3-window {
  width: 25%;
  height: 80%;
  background-color: var(--window-color1);
}

Preview:

Question:

Why the overflow of three black .fb3-window div inside .fb3a div do not affect layouts of other three div which have the same level with .fb3a in html doc?

I originnally consider they will overflow the parent container .fb3 instead due to the overflow inside .fb3a.

or why three black .fb3-window div inside .fb3a overflow like hiding behind the layer where .fb3a is in?

Pre-thanks for your reply and correcting!!!

Course Link: full-stack-developer workshop-city-skyline step-91

2

you are making the .fb3-window element a flex container, that affects only the elements that are direct children of that

you may want to research more about flexbox

3

Maybe I did not explain my idea clearly.

Why three black block which are overflow content behave like hiding behind,making me have a feeling of a layor difference.

4

can you show what you mean?

5

image
image
like why can`t the three black block come before the second purple block

6

what element is the second purple block?

7

This one is the second purple block.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.