HTML/CSS about position: relative

我使用Visual Studio Code并打开live server。
我注意到box_1的'#red'的'position: relative'不起作用
你是如何使它起作用的?

编辑期望结果的图像链接

也尝试了独特的id
ex) red_1, orange_1, yellow_1
如果可能的话，你能告诉我它不工作的原因吗
考虑相对和浮动之间的冲突，但我不确定

HTML
的结果

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>

这个视频将解释为什么浮动不占用块空间的问题。https://youtu.be/UAWLXYUGqpc

原因是被浮动项被从流中取出。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow taking_an_item_out_of_flow

试试这个例子，看看float是如何工作的。

<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>

仅供参考，我不建议使用浮动布局div。https://stackoverflow.com/a/15177860

在顶部添加另一个<div class="box_1" id="red"></div>:

.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>

或者重写成一个有效的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>

为了达到你想要的结果，你必须给第一个红框设定空白，这样下一个相对的红框就会放置在那里，从而得到你想要的结果。

.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>

相关内容

最新更新

热门标签：