HTML/CSS about position: relative

Question

I used Visual Studio Code and opened with live server.
I noticed 'position: relative' of box_1's '#red' is not working
How do you make it work?

edit image link of expecting result

also tried with unique ids
ex) red_1, orange_1, yellow_1
if possible can you tell me the reason it's not working
Thinking about conflict between ralative and float but I'm not sure

HTML
result
expecting_result

.box_1{  
      width: 100px;
      height: 100px;
      float: left; 
    }
    
.box_2{
      width: 100px;
      height: 100px;
    }
   
.box_3{ 
      width: 100px;
      height: 100px;
    }

#red{
     background-color: red;
     top: 100px;
     left: 100px;
     position: relative;        
   }

#orange{
     background-color: orange;
     top: 100px;
     left: 100px;
     position: relative;
   }

#yellow{
     background-color: yellow;
     top: 100px;
     left: 100px;
     position: relative;
   }
html

<div class="box_1" id="red"></div>
<div class="box_1" id="orange"></div>
<div class="box_1" id="yellow"></div>

<div class="box_2" id="red">
    <div class="box_2" id="orange">
        <div class="box_2" id="yellow">
        </div>
    </div>
</div>

<div class="box_3" id="red"></div>
<div class="box_3" id="orange"></div>
<div class="box_3" id="yellow"></div>

what is your expected behavior? Also `id` should be unique. In your HTML you have used many times same `id` — Suresh Ponnukalai, Aug 11 '21 at 05:05
Non-unique ids work sometimes but it can give unexpected results across browsers in some cases, so always use unique IDs to rule this out and then see if you still face the issue — Deepak Kamat, Aug 11 '21 at 05:11
@AnikethMalyala I edit/ image link for the expecting result. sorry.. — na08, Aug 11 '21 at 05:31
@SureshPonnukalai I edit the link of expecting result. sorry.. — na08, Aug 11 '21 at 05:34

vanowm · Answer 1 · 2021-08-11T05:40:41.337

just add another <div class="box_1" id="red"></div> to the top:

.box_1{  
      width: 100px;
      height: 100px;
      float: left; 
    }
    
.box_2{
      width: 100px;
      height: 100px;
    }
   
.box_3{ 
      width: 100px;
      height: 100px;
    }

#red{
     background-color: red;
     top: 100px;
     left: 100px;
     position: relative;        
   }

#orange{
     background-color: orange;
     top: 100px;
     left: 100px;
     position: relative;
   }

#yellow{
     background-color: yellow;
     top: 100px;
     left: 100px;
     position: relative;
   }

<div class="box_1" id="red"></div>
<div class="box_1" id="red"></div>
<div class="box_1" id="orange"></div>
<div class="box_1" id="yellow"></div>

<div class="box_2" id="red">
    <div class="box_2" id="orange">
        <div class="box_2" id="yellow">
        </div>
    </div>
</div>

<div class="box_3" id="red"></div>
<div class="box_3" id="orange"></div>
<div class="box_3" id="yellow"></div>

or better rewrite it to a valid HTML:

.box_1{
      width: 100px;
      height: 100px;
      float: left; 
    }
    
.box_2{
      width: 100px;
      height: 100px;
    }
   
.box_3{ 
      width: 100px;
      height: 100px;
    }

.red{
     background-color: red;
   }

.orange{
     background-color: orange;
   }

.yellow{
     background-color: yellow;
   }

.box_2,
.box_2 *
{
     top: 100px;
     left: 100px;
     position: relative;
}

<div class="box_1 red"></div>
<div class="box_1 red"></div>
<div class="box_1 orange"></div>
<div class="box_1 yellow"></div>
    <div class="box_2 orange">
        <div class="box_2 yellow">
        </div>
    </div>
<div class="box_3 red"></div>
<div class="box_3 orange"></div>
<div class="box_3 yellow"></div>

sorry to bother not putting the expecting result. I edited the link of image.. thank you — na08, Aug 11 '21 at 05:33

score 0 · Answer 2 · answered Aug 11 '21 at 05:59

To Achieve your desired result, you have to given the margin for the first red box, so that next relative red box will place in that and will get the desired result.

.box_1#red {
  margin-left:100px;
}

.box_1{  
      width: 100px;
      height: 100px;
      float:left;
    }
 .box_1#red {
      margin-left:100px;
 }
    
.box_2{
      width: 100px;
      height: 100px;
    }
    
.box_3{ 
      width: 100px;
      height: 100px;
      
    }

#red{
     background-color: red;
     top: 100px;
     left: 100px;
     position: relative;        
   }

#orange{
     background-color: orange;
     top: 100px;
     left: 100px;
     position: relative;
   }

#yellow{
     background-color: yellow;
     top: 100px;
     left: 100px;
     position: relative;
   }

<div class="box_1" id="red"></div>
<div class="box_1" id="orange"></div>
<div class="box_1" id="yellow"></div>

<div class="box_2" id="red">
    <div class="box_2" id="orange">
        <div class="box_2" id="yellow"></div>
    </div>
</div>
      

<div class="box_3" id="red"></div>
<div class="box_3" id="orange"></div>
<div class="box_3" id="yellow"></div>

score 0 · Accepted Answer · answered Aug 12 '21 at 09:22

This video will explain your issue why float doesn't take a block space.
https://youtu.be/UAWLXYUGqpc

And the reason is the floated item is taken out from the flow.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow#taking_an_item_out_of_flow

Try this example to see how float is working.

<style>
.float_div{  
      width: 100px;
      height: 100px;
      background-color: blue;
      float: right;
    }
    
.box{
    width: 200px;
    height: 200px;
    background-color: red;
    opacity: 30%;
}
   
</style>
<html>
    <div class="float_div"></div>
    <div class="box"></div>
</html>

Just fyi, I'd not recommend to use float to layout divs. https://stackoverflow.com/a/15177860

THANK YOU. Your answer helped me a lot! I feel so much better now...! — na08, Aug 13 '21 at 10:36

HTML/CSS about position: relative

3 Answers3