Html 如果子对象处于绝对位置，则div不会调整为高度

我在一个DIV里有一个图像。 我想在DIV外部稍微“突出”一点图像，所以我将其定位为绝对，将父容器定位为相对。当我这样做时，父DIV不再调整其高度以包含图像。 我该怎么做

HTML

      <div class=".twelve.columns" id="header">
        <div id="logoWrapper">
                <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
                <div class="clr"></div>
        </div>      
      </div>  

首先：

---

如果要在一个元素上放置两个类，请使用像

，而不是像

第二，关于你的问题：

绝对定位的图元将从流中删除，因此在计算父图元的尺寸时不再考虑

可以通过在元素上显式设置所需的

高度

和

宽度

来解决此问题

绝对定位的元素将从文档流中完全移除，因此它们的维度不能改变其父元素的维度。 如果您真的必须在保持子对象为position:absolute的同时实现这种效果，那么可以使用JavaScript实现

要在没有javascript的情况下获得所描述的效果，可以对bottom或top使用负值。我还更新了您的示例

.ssImg{
宽度：100%；
}
.clr{
明确：两者皆有；
}
#标题{
边际上限：0；
背景：#000；
位置：相对的；相对的
宽度：100%；
边框：1磅纯红；
}
#商标包装{
宽度：15%；
最小宽度：120px；
左边距：10px；
位置：相对；/*这是新的*/
底部：-40px；/*这是新的*/
}

这个怎么样

html，正文{
身高：100%；
填充：20px；
}
ssImg先生{
宽度：100%；
}
#标题{
背景色：#000；
位置：相对位置；
宽度：100%；
高度：100%；/*设置所需的高度*/
边框：1磅纯红；
}
#商标包装{
宽度：15%；
最小宽度：120px；
位置：绝对位置；
顶部：-15px；
左：-25px；
}

---

如果要在一个元素上放置两个类，请使用类似

，而不是类似

。

.ssImg{
    width:100%;
}
.clr{
    clear:both;
}
#header{
     margin-top:0;
     background:#000;    
     position:relative;
     width:100%;
     border:1pt solid pink; 
}