Question

我想要一个简单的个人资料页面，我有一个宽大的封面图像，然后我试图将徽标图像放在它上面。然后剩下的信息来了。

我尝试了这个：stackoverflow.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;
}

最后，我得到了我想要的东西，在它上面放一个封面图片，然后是一个标志。但是，现在这些图片与其他信息之间存在很大差距，因为#container-biz-header保持原始高度为height('#feature-graphic-background')+height('#logo-background')。

我可以做些什么来避免这种差距？或者，是否有更好的方法将徽标图像定位在封面图像的顶部，避免了这种间隙？

Answer 1

将 height：200px CSS添加到＃container-biz-header以阻止它获得高度（＆＃39;＃feature-graphic-background＆＃39;）+ height（＆＃39; #logo-background＆＃39;）身高，这是plunker。

在您的HTML中，您也有错字。＆＃34;身高200px＆＃34;和＆＃34;身高150px＆＃34;应该有＆＃34;：＆＃34;

    <Grid>
    <Button Content="Button" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <ei:ChangePropertyAction TargetName="State"  Value="False"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>
    <Button Content="Button" HorizontalAlignment="Left" Margin="94,10,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>

Answer 2

这是小提琴http://jsfiddle.net/es_kaija/0jsqpq4L/3/

注意拼写：）

CODE     KEY      GROUPBY     VALUE      <-- COLUMN

CAT       1       'NULL'       500       <-- DATA
DOG       2       'NULL'       400
RAT       3       'NULL'       300       
SUM       4        1,3         800       <-- result
NUT       5       'NULL'       200
SUM2      6        2,5         600       <-- result

将图像定位在另一个图像之上会产生间隙

2 个答案: