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;
}

如何完全重叠图片？而且它不向左对齐

1 个答案: