时间戳

首页 > 解决方案 > 我怎样才能完全重叠一张图片？而且它不向左对齐

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

问题描述

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

<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 是略微向下而不是与插图重叠。我能明白为什么会这样吗？

标签： htmlcss

解决方案

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

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

推荐阅读