将图像放置在另一个图像之上会产生间隙

Question

我正在尝试创建一个简单的个人资料页面，其中我有一张宽大的封面图片，然后我试图将徽标图片放在它上面。然后剩下的信息就来了。

我尝试了这个：Whosebug。com/questions/2941189/how-to-overlay-one-div-over-another-div 我能够将一张图片放在另一张图片上，但由于某种原因，其余信息也放在了图片上。

我自己尝试过，这是我的 html:

        <div id="container-biz-header">
            <div id="feature-graphic-background" style="background-image: url('../Images/FG-10000001.jpg'); width: 700px; height 200px; background-repeat: no-repeat;">
            </div>
            <div id="logo-background" style="background-image: url('../Images/Logo-10000001.jpg'); width: 150px; height 150px; background-repeat: no-repeat;">
            </div>
        </div>
... here comes a lot of more information

我的CSS如下：

#container-biz-header {
    margin: auto;
}

#feature-graphic-background {
    margin: auto;
}

#logo-background {
    width: 160px;
    height: 170px;
    margin: auto;
    z-index: 10;
    position:relative;
    top: -100px;
    right: -300px;
}

终于如愿以偿了，放一张封面图，然后在上面放一个logo。但是，现在这些图像与其余信息之间存在很大差距，因为 #container-biz-header 保持其原始高度，即 height('#feature-graphic-background')+height('#logo-background').

我该怎么做才能避免这种差距？或者，是否有更好的方法将徽标图像放置在封面图像的顶部，从而避免出现此间隙？

Answer 1

添加 height:200px CSS 到 #container-biz-header 以阻止它获取高度('#feature-graphic-background')+height( '#logo-background') height ，这里是 plunker .

并且在您的 html 中，您也有错字。 "height 200px" 和 "height 150px" 应该有 ":" .

#container-biz-header {
   margin: auto;
   height:200px;
 }

Answer 2

这里是fiddlehttp://jsfiddle.net/es_kaija/0jsqpq4L/3/

注意拼写:)

  #container-biz-header {
  margin: auto;
  height: 200px;
}

将图像放置在另一个图像之上会产生间隙

positioning on image on top of another creates gap

html

css

css-position