Css 使div包含在容器div中

容器包含的

CSS

属性使

a

、

b

、

div

成为什么

div{
边框：1px纯绿色；
}
#容器{
位置：固定；
宽度：100%；
}
a.b{
顶部：10px；
位置：绝对位置；
}
abc
efg

更新

---

position:fixed和position:absolute是遗留部分，我认为它们是合乎逻辑的：我想相对地将a，b放入固定容器中。为什么我要将绝对更改为相对

---

如果不将a、b位置更改为相对位置，则无法解决此问题？为什么？为什么我需要改变容器的高度？a、 b在容器中

只需从div

a

和

b

只要改变就行了

position: absolute;

到

---

子元素确实位于父块中

但是，由于

#容器

中没有流入内容，因此其高度将塌陷为零，似乎子元素不在其中

如果指定父块的高度，则会看到

.a

和

.b

如您所期望的那样位于父块内

在原始示例中，子元素溢出到父容器（高度为零）之外。如果在父元素上设置了

overflow:hidden

，则子元素将不可见

div{
边框：1px纯绿色；
}
#容器{
位置：固定；
宽度：90%；
高度：100px；
}
a.b{
位置：绝对位置；
}
.a{
顶部：20px；
左：20px；
}
.b{
顶部：50px；
左：50px；
}

abc
efg

我不确定您想要什么，但如果只是在一个带有边框的更大容器中使用a和b div，请执行以下操作：

css:

html:

abc
efg

为什么要绝对定位元素？position:fixed和position:absolute是遗留部分，我认为它们是合乎逻辑的：我想相对地将a、b放入固定容器中。为什么我要将绝对位置更改为相对位置？如果不将a、b位置更改为相对位置，则无法解决此问题？为什么？为什么我需要改变容器的高度？a、 b在集装箱里

position: absolute;

 position: relative;

.a, .b {
    width : 20%;
    float : left;
}

#container {
     position: fixed;   
     border: 1px solid green; 
}

.a {
    margin:10px;
}

<div id="container">
    <div class="a">abc</div>
    <div classput="a">efg</div>
</div>