Html 子div从主div飞出，即使在使用正确的相对&；绝对定位

我刚刚问了一个关于相对和绝对定位以及将clearfix应用于主容器的问题，因为我已经编写了代码，但它的行为并没有达到我的预期

这是一个关于产品历史的简单页面。导航栏在屏幕顶部有下拉菜单，然后屏幕上有一个大英雄图像，后面有几个段落和一个简单的页脚，就是这样

我的问题是：

---

我需要把3个组成部分在英雄形象区-英雄形象本身，一个标题词在左上角和一个标志在右上角。我所做的是：我创建了一个div，并使用英雄图像作为背景图像。我将div的位置值设置为relative。我创建了另一个div来保存标题词，并使用top和left将位置设置为absolute。按照同样的逻辑，我创建了另一个div来保存徽标，并将其设置为向右浮动，将position设置为absolute，并将top和right设置为给定位置。我已经将clearfix应用于主div，在我的屏幕上（分辨率1280 x 1024）一切看起来都正常，直到我在宽屏幕上看到它（1680 x 1050）--徽标不在英雄图像上！在英雄形象的右边

这是什么原因？我想，通过在主div中放置两个div并应用clearfix，这三个div将“聚在一起”并作为一个div，而不会分离。。。是因为我没有为响应式布局编写任何代码吗？还是因为我不该用英雄形象作为背景？如果我使用z-index来指定英雄图像、徽标和标题词的堆栈顺序，这个问题会得到解决吗

下面是我的代码和任何帮助将不胜感激

<div id="history-content" class="clearfix">
    <div id="history-image-text">HISTORY</div>
    <div id="stamp">
        <img src="./images/logo.png">
    </div>
</div>



#history-content {
    background-image: url('./images/heroimage.jpg');
    min-height: 307px;
    background-repeat: no-repeat;
    position: relative;
}

#history-image-text {
    color: #fff;
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 20px;
    font-weight: bold;
}

#stamp img {
    width: 10%;   /*not sure I'm doing the right thing here either*/
    height: 40%;  /*not sure I'm doing the right thing here either*/
    float: right;
    position: absolute;
    right: 100px;
    top: 20px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    line-height: 0;
}

历史
#历史内容{
背景图片：url（'./images/herogmage.jpg'）；
最小高度：307px；
背景重复：无重复；
位置：相对位置；
}
#历史图像文本{
颜色：#fff；
位置：绝对位置；
顶部：20px；
左：50px；
字体大小：20px；
字体大小：粗体；
}
#邮票img{
宽度：10%；/*我也不确定我在这里做的是对的*/
身高：40%；/*我也不确定我在这里做的是对的*/
浮动：对；
位置：绝对位置；
右：100px；
顶部：20px；
}
.clearfix:之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
身高：0；
线高：0；
}

几件事：

• 绝对定位的图元从正常流中取出，因此不会影响其父图元的大小
• 因为它们超出了正常流量，

  float

  对它们没有影响（据我所知）
• 绝对定位元素收缩包装以适合其内容，除非使用

  顶部

  、

  右侧

  、

  底部

  和

  左侧

  属性显式设置或拉伸

  宽度

  和

  高度

现在，您的父div

#history content

没有设置任何高度，并且它的所有内容都是绝对定位的，因此（高度0）

为父母选择合适的身高对我来说似乎很合适

---

旁注：与您所想的不同，您没有两个绝对定位的

，

#stamp img

绝对定位

内部

div#stamp

，出于上述相同原因，

div#stamp

也不可见（高度0），您将获得与和相同的结果。正如其他人所说，float对绝对定位元素没有影响，因此从技术上讲，在这种情况下不需要clearfix

我不太清楚为什么您的徽标会被放置在最外层的容器“历史记录”内容之外，但您可以尝试在“历史记录”内容周围加一个边框，以便进一步排除故障

编辑：也许可以检查你的英雄形象尺寸，宽度是否小于1608px

历史

我已经在下面更改了你的CSS

---

jsiddle:

float对绝对定位的元素没有影响，据我所知……”我创建了另一个div来保存徽标，并将其设置为向右浮动，位置设置为绝对，而“-我没有看到另一个div具有绝对位置。在共享代码中只有一个div具有绝对位置。嗨，Tilwin，在#历史图像文本和#戳记img部分中都有“位置：绝对”…谢谢。@TilwinJoy是的，我不是100%清楚浮动和绝对位置。你是说它们不能一起使用吗？所以是“非此即彼”？谢谢。希望答案能解释。非常感谢，我道歉-我在#历史内容部分确实有最小高度：307px。这就是英雄形象的高度。我遇到了上面在1680x1050屏幕上描述的问题，代码行已经就位。请你再看一遍好吗？@user3603298我用

1920x1080

res检查了我在imac上共享的小提琴，没有任何东西在背景之外……这是实际的css还是缺少了更多的碎片……我将“最小高度：307px”替换为“高度：100%”和“宽度：100%”英雄形象将它的大小从1214x307改为1214x121…不知道为什么。嗨，谢谢你的帮助。是的，英雄的宽度是1214px，比1608px小。这可能是问题的原因吗？是的，很有可能#历史内容背景不会拉伸或重复-由css设置。如果希望背景自动展开，请添加背景大小：封面；到#历史内容

#history-content {
    background-image: url('./images/heroimage.jpg');
    min-height: 307px; /*set whatever minimum height you wish*/
    background-repeat: no-repeat;
    position: relative;
}

#history-image-text {
    color: #fff;
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 20px;
    font-weight: bold;
}

#stamp {
    display: block;
    position: absolute;
    right: 100px;
    top: 20px;
    width: 10%; /*set width of image in containter instead*/
    height: auto;
}

#stamp img {
    max-width: 100%; /*image width will not stretch beyond 100% of container*/
    height: auto;
}