防止div元素中的图像和动态文本重叠

Question

我在另一个中有一个back-button图像作为div元素。 #program_title中的文本是动态变化的，宽度也是如此。我想防止back-button图片与文字重叠，但一直没有成功。

到目前为止 - 我尝试向左或向右浮动图像，将样式设置为display: inline-block，更改边距，然后使用<span>代替<div>。如果我将#program_title的位置更改为相对位置，则会以某种方式干扰元素的居中。我认为有一些我想念的简单。有什么建议来解决这个问题吗？

#map {
position:absolute;
left:25%;
top:0;
bottom:0;
width: 75%;
}


#program_title{
  position: absolute;
  z-index: 20202020;
  background: rgba(12, 12, 12, 0.99);
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  display: inline-block;
  left: 50%;
  width: auto;
  top: 1%;
  text-align: center;
  padding: 5px 10px;
  border-radius: 10px;
  -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -o-transform: translateX(-50%);
   transform: translateX(-50%);
}

#go-back {
  content:url('./back-button.svg');
  position: absolute;
  color: #fff;
  border-radius: 5px;
  left: 1%;
  height: 20px;
  width: 20px;
  opacity: 0.9;
  float: left;
  display:inline-block;
}

  <div id='map'>
    <div id='program_title'>
            <div id ='go-back'></div>
        <span>TITLE</span>
    </div>

  </div>

Answer 1

您不应该将位置保持在#go-back中，因为由于此特定属性，后退按钮具有绝对位置，而与其上或周围的任何其他元素无关。这似乎是其他元素与后退按钮重叠（在您的情况下是标题），但实际上如果您向下滚动页面（即如果您的页面足够大以便向下滚动），您会注意到后面的位置按钮不会改变。因此，将其更改为相对或删除样式中的位置属性。

Answer 2

你有很多不需要的代码！如果问题出在图像上那么一个简单的浮点就可以了。如果父母的div位置是绝对的，那也没关系！ here我做了一个小提琴。

以及您需要的所有CSS。当然，其中一些是为了风格，你可以嘲笑它。

#map {
position:absolute;
left:25%;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}
#go-back {
  content:url('http://img.freepik.com/free-icon/back-button_318-69320.jpg?size=338&ext=jpg');
  float: left;
  display:inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
#program_title {
  line-height: 25px;
}

Answer 3

您需要从position:absolute;移除#go-back，而是使用display:inline-block;或float:left;

#go-back {
  content:url('https://cdn2.iconfinder.com/data/icons/arrows-and-universal-actions-icon-set/256/left_circle-128.png');
  color: #fff;
  border-radius: 5px;
  height: 20px;
  width: 20px;
  opacity: 0.9;
  display:inline-block; /* Or float:left */
}

jsFiddle