Html 两个以上的Div？

添加

div3

的最佳方法是什么，如图所示？它应该是单独的

div

还是

div1

或

div2

的子级

我不完全确定如何制作，这样我就可以轻松地在不同的屏幕大小下操作

div3

。我不知怎的觉得，将

div

位置设置为

absolute

并使用大偏移量是错误的。

.div1{
位置：相对位置；
边框：1px实心#ccc；
高度：100px；
}
.第2分部{
边框：1px实心#ccc；
高度：100px；
}
.第3分部{
位置：绝对位置；
最高：35%；
宽度：25%；
边框：1px纯红；
高度：100px；
右：5%；
背景：rgba（45,45,45,25）；
}

Div1
第三组
第2部分

.div1{
位置：相对位置；
边框：1px实心#ccc；
高度：100px；
}
.第2分部{
边框：1px实心#ccc；
高度：100px；
}
.第3分部{
位置：绝对位置；
最高：35%；
宽度：25%；
边框：1px纯红；
高度：100px；
右：5%；
背景：rgba（45,45,45,25）；
}

Div1
第三组
Div2

以下是如何使用绝对定位来放置第三个

div

。有几种方法可以做到这一点，我认为这是最容易理解的

#容器{
宽度：400px；
高度：200px；
背景：蓝色；
位置：相对位置；
}
格林分区{
背景：绿色；
显示：块；
高度：100px；
}
红色分区{
背景：红色；
显示：块；
高度：100px；
}
分区箱{
宽度：100px；
高度：100px；
背景：黄色；
位置：绝对位置；
右：20px；
最高：50%；
转换：translateY（-50%）；

---

以下是如何使用绝对定位来放置第三个

div

。有几种方法可以做到这一点，我认为这是最容易理解的方法

#容器{
宽度：400px；
高度：200px；
背景：蓝色；
位置：相对位置；
}
格林分区{
背景：绿色；
显示：块；
高度：100px；
}
红色分区{
背景：红色；
显示：块；
高度：100px；
}
分区箱{
宽度：100px；
高度：100px；
背景：黄色；
位置：绝对位置；
右：20px；
最高：50%；
转换：translateY（-50%）；

您有两种方法

一个就像你说的，把它设为绝对值，但把它设为第二个div的子级，这个div是相对的，然后给它加上负的top

第二个是在它和第二个div上使用否定的marings。但是看看这两个选项，从“最佳实践”的角度来看，第一个是很好的

代码如下：

.first、.second{
宽度：100%；
背景：#000；
高度：80px；
}
.第二{
位置：相对位置；
背景：#888；
}
.第三{
位置：绝对位置；
宽度：100px；
高度：40px；
右：50px；
顶部：-20px；
背景：红色；
}

您有两种方法

一个就像你说的，把它设为绝对值，但把它设为第二个div的子级，这个div是相对的，然后给它加上负的top

第二个是在它和第二个div上使用否定的marings。但是看看这两个选项，从“最佳实践”的角度来看，第一个是很好的

代码如下：

.first、.second{
宽度：100%；
背景：#000；
高度：80px；
}
.第二{
位置：相对位置；
背景：#888；
}
.第三{
位置：绝对位置；
宽度：100px；
高度：40px；
右：50px；
顶部：-20px；
背景：红色；
}

---

我的建议是将其添加为一个新的独立div，因为它不完全包含在其他两个div中

---

关于绝对位置的使用，它是为这种用途而设计的，因此使用它时不要感到尴尬。为了保持不同屏幕尺寸的良好设计，我建议您使用它，以便您可以根据不同的屏幕尺寸调整Css。

我的建议是将其添加为新的独立div，因为它不完全包含在任何一个单独的div中另外两个div

---

关于绝对位置的使用，它是为这种用途而设计的，因此使用它时不要感到尴尬。为了保持对不同屏幕大小的良好设计，我建议您使用它，以便您可以调整Css以适应不同的屏幕大小。

不使用位置

绝对
或
相对


.bigdiv{
高度：100px；
背景：绿色；
边框：1px实心；
}
斯莫迪夫先生{
宽度：200px；
高度：50px；
背景：橙色；
浮动：对；
右边距：10px；
转化：translateY（-50%）；
/*
您可以使用页边距顶部：-50px；以实现浏览器兼容性
边缘顶部应为-（div高度的一半）；
*/
}
不使用位置
绝对值
或
相对值


.bigdiv{
高度：100px；
背景：绿色；
边框：1px实心；
}
斯莫迪夫先生{
宽度：200px；
高度：50px；
背景：橙色；
浮动：对；
右边距：10px；
转化：translateY（-50%）；
/*
您可以使用页边距顶部：-50px；以实现浏览器兼容性
边缘顶部应为-（div高度的一半）；
*/
}