Html 将子div保持在父div的内部

好的，嗨，我觉得这是一个非常愚蠢的问题，我发现了很多这样的问题，但是没有一个答案对我有效

我的问题是，有一个div（任务栏）和它里面的另一个div（任务栏栏），我希望任务栏栏留在任务栏内。我试着将位置设置为绝对和相对，但它似乎根本不起作用，它总是在任务栏div下面。我可以用top将其向上推，但我觉得现在不应该这样做。不过我不知道，老实说，我对CSS和HTML还很陌生，而且还在学习

下面是我的代码：

任务栏{
宽度：100%；
高度：40px；
盒影：0px 1px 0px 0px#C2C5CA插图，0px 2px 0px 0px#FFF插图；
背景色：#C2C5CA；
位置：绝对位置；
左：0；
底部：0；
}
#任务栏启动{
利润上限：4倍；
边缘底部：2px；
左边距：2倍；
宽度：90px；
高度：33像素；
背景色：#C2C5CA；
光标：指针；
}
.任务栏启动处于非活动状态{
盒影：-1px-1px 0px 0px#000插图，1px 1px 0px 0px#FFF插图，-2px-2px 0px 0px#868A8E插图；
}
.任务栏启动处于活动状态{
盒影：-1px-1px 0px 0px#FFF插图，1px 1px 0px 0px#000插图，2px 2px 0px 0px#868A8E插图；
}
.任务栏开始帧处于活动状态{
边缘顶部：2倍；
左边距：2倍；
宽度：84px；
高度：27px；
边框样式：虚线；
边框宽度：1px；
位置：绝对位置；
}
.任务栏开始标志{
边缘顶部：6px；
左边距：3倍；
宽度：自动；
高度：20px；
-webkit用户选择：无；
}
.任务栏开始文本{
边缘顶部：10px；
左边距：5px；
显示：内联；
字体大小：12px；
字母间距：-2px；
-webkit用户选择：无；
字体系列：“按开始2P”；
位置：绝对位置；
}
.任务栏{
高度：35px；
宽度：2倍；
背景：绿色；
左边距：100px；
}

开始

将

任务栏开始

和

任务栏

的“显示”更改为“内联块”

---

我认为最好的方法是让父容器成为flexbox容器。 这会将所有子项放置在一行中

display: flex; 

看

---

阅读更多关于flexbox的信息：

您的问题是您使用的是margin left，它试图在一个div和另一个div之间提供一个边距。是一个新的JSFIDLE，我将位置设置为

绝对

，将

左边距

更改为

左边

，并添加了

顶部：0px

将其设置为顶部（覆盖另一个div）

display: flex; 

.taskbar-bar {
  position: absolute;
  top: 4px;
  left: 100px;
    height: 35px;
    width: 2px;
    background: green;
}