html - 我怎样才能完全重叠一张图片？而且它不向左对齐

Question

当你重叠图片时，这是一个奇怪的位置。

<img id = "ganttIn" src = 'ganttBackground.png'><br>
<div id = 'chartBar0' style = '
            float:left;
            position : absolute;

            width : 10%;
            height : 20px;

            background-color : #D4F4FA;

            display : inline-block;
            '>
<\div>
<\img>

我要

#ganttIn{
  position: relative;
  top : 20px;
  left : 40px;
  /*margin: 20px auto 40px auto;*/

  width : 80%;
  height : 25px;
  z-index: 1;

  text-align: left;
}

我想把两张图片叠加成一个甘特图。这就是 Bar 要向左对齐的原因。但是#chartBar 是居中对齐，不是左对齐 它还有一个奇怪的位置#chartBar 稍微向下而不是与插图重叠。我能看出为什么会这样吗？

Answer 1

这是一个快速修复。不确定这是否是您真正想要的。

<div class="wrapper">
    <img id="ganttIn" src="ganttBackground.png"/>
    <div id="chartBar0"></div>
</div>

css(将 z-index: 2; 添加到你需要的那个上面)

.wrapper{
    position: relative;
    top : 20px;
}
#ganttIn{
    position: absolute;
    /*left: 40px;*/ enble this if you need
    width: 80%;
    height: 25px;
}
#chartBar0{
    position: absolute;
    width: 10%;
    height: 20px;
    background-color: #D4F4FA;
}