以精确定位将 2 张图像叠加在另一张（背景图像）上

Question

我有 3 张图片。一个是背景图片，它规定了包含它的 div 的大小（img {width: 100% height:auto），它允许我动态调整 div 的大小，保持图片的比例锁定。

我还有 2 张图片放在一起等于背景图片的尺寸。它们是透明的，除了黑色圆形轮廓图像：

我试图将这 2 个图像放置在背景图像的顶部，但我根本无法做到这一点。我需要它们固定在背景图像上，因此当调整窗口大小时，它们会调整背景图像的大小，使其位置保持在其顶部（即与背景图像一起缩小）。以这个结束：

谁能帮我解决这个问题？提前感谢您的任何指导。

function openLink(evt, animName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("information");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(animName).style.display = "block";
}

@font-face {
  font-family: "walkway oblique ultraBold";
  src: url("https://cdn.shopify.com/s/files/1/0019/0909/6500/files/Walkway_Oblique_UltraBold.woff?8124544898226561589") format("woff");
  font-weight: normal;
  font-style: normal;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  padding: 0;
}

.grid-container-social {
  grid-template-columns: auto;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 40px;
  text-align: center;
}

.grid-item {
  font-family: 'walkway oblique ultraBold', arial;
  background-color: black;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 3.5vw;
  text-align: center;
  color: white;
  text-decoration: none;
}

#background img {
  width: 100%;
  height: auto;
  position: relative;
}

#image-left img {
  left: 0;
  top: 0;
}

#image-right img {
  right: 0;
  top: 0;
}

.background-wrap {
  background-color: black;
  color: white;
  font-size: 2vw;
}

.item1 {
  grid-column: 1 / 7;
}

.item_social {
  grid-column: 1 / 6;
}

.fab-flag:hover {
  color: #0099cc;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<div class="container  header-space">
  <div class="background-wrap"><br><br>
    <div id="background"><img src="https://cdn.shopify.com/s/files/1/0019/0909/6500/files/about_us_background.png?15676093355455950193">
      <div id="image-left"><img src="https://cdn.shopify.com/s/files/1/0019/0909/6500/files/left_image.png?17699760671222922809"></div>
      <div id="image-right"><img src="https://cdn.shopify.com/s/files/1/0019/0909/6500/files/right_image.png?17699760671222922809"></div>
    </div>
    <div class="grid-container">
      <div class="item1 grid-item"></div>
      <div class="item2">
        <a href="javascript:void(0)" onclick="openLink(event, 'ubcrew');">
          <div class="grid-item w3-hover-white">ub
            <font color="red">crew</font>
          </div>
        </a>
      </div>
      <div class="item3">
        <a href="javascript:void(0)" onclick="openLink(event, 'ubstory');">
          <div class="grid-item w3-hover-white">ub
            <font color="red">story</font>
          </div>
        </a>
      </div>
      <div class="item4">
        <a href="javascript:void(0)" onclick="openLink(event, 'ubmission');">
          <div class="grid-item w3-hover-white">ub
            <font color="red">mission</font>
          </div>
        </a>
      </div>
      <div class="item5">
        <a href="javascript:void(0)" onclick="openLink(event, 'ubvibe');">
          <div class="grid-item w3-hover-white">ub
            <font color="red">vibe</font>
          </div>
        </a>
      </div>
      <div class="item6">
        <a href="javascript:void(0)" onclick="openLink(event, 'ubpromise');">
          <div class="grid-item w3-hover-white">ub
            <font color="red">promise</font>
          </div>
        </a>
      </div>
      <div class="item7">
        <a href="javascript:void(0)" onclick="openLink(event, 'ubsocial');">
          <div class="grid-item w3-hover-white">ub
            <font color="red">social</font>
          </div>
        </a>
      </div>
    </div>
    <div id="ubcrew" class="information w3-animate-opacity">
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div id="ubstory" class="information w3-animate-left" style="display:none">
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div id="ubmission" class="information w3-animate-top" style="display:none">
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div id="ubvibe" class="information w3-animate-right" style="display:none">
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div id="ubpromise" class="information w3-animate-bottom" style="display:none">
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div id="ubsocial" class="information w3-animate-bottom" style="display:none">
      <div class="grid-container-social">
        <a href="https://www.facebook.com/ubeezen/"><i class="fab fab-flag fa-facebook-square fa-10x"></i></a>
        <a href="https://twitter.com/ubeezen"><i class="fab fab-flag fa-instagram fa-10x"></i></a>
        <a href="https://www.instagram.com/ubeezen/"><i class="fab fab-flag fa-twitter-square fa-10x"></i></a>
        <a href="https://www.pinterest.co.uk/ubeezen/"><i class="fab fab-flag fa-pinterest-square fa-10x"></i></a>
        <a href="https://ubeezen.tumblr.com/"><i class="fab fab-flag fa-tumblr-square fa-10x"></i></a>
      </div>
    </div>
  </div>
</div>

Answer 1

将#image-left 和#image-right（不是img）定位到position:absolute 和width:50%（一个在左边，一个在右边 em>)

所以基本上加了

#image-left, #image-right{
  position:absolute;
  top:0;
  width:50%;
}
#image-left{left:0;}
#image-right{right:0;}

并删除

#image-left img {
  left: 0;
  top: 0;
}

#image-right img {
  right: 0;
  top:0;
}

---

工作演示

function openLink(evt, animName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("information");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  document.getElementById(animName).style.display = "block";
  
}

@font-face {
font-family:"walkway oblique ultraBold";
src:url("https://cdn.shopify.com/s/files/1/0019/0909/6500/files/Walkway_Oblique_UltraBold.woff?8124544898226561589") format("woff");
font-weight:normal;
font-style:normal;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  padding: 0;
  
}

.grid-container-social {
 
  grid-template-columns: auto;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 40px;
  text-align: center;
}

.grid-item {
  font-family: 'walkway oblique ultraBold', arial;
  background-color: black;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 3.5vw;
  text-align: center;
  color: white;
  text-decoration: none;
}

#background img {
  width: 100%;
  height: auto;
  position: relative;
}
#image-left, #image-right{
  position:absolute;
  top:0;
  width:50%;
}
#image-left{left:0;}
#image-right{right:0;}


.background-wrap {
  background-color: black;
  color: white;
  font-size: 2vw;
}

.item1 {
  grid-column: 1 / 7;
}

.item_social {
  grid-column: 1 / 6;
}

.fab-flag:hover {
    color: #0099cc;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<div class="container  header-space">
<div class="background-wrap"><br><br>

<div id="background"><img src="https://cdn.shopify.com/s/files/1/0019/0909/6500/files/about_us_background.png?15676093355455950193">
  <div id="image-left"><img src="https://cdn.shopify.com/s/files/1/0019/0909/6500/files/left_image.png?17699760671222922809"></div>
  <div id="image-right"><img src="https://cdn.shopify.com/s/files/1/0019/0909/6500/files/right_image.png?17699760671222922809"></div>
</div>


  <div class="grid-container">
<div class="item1 grid-item"></div>
  	

<div class="item2">
  	<a href="javascript:void(0)" onclick="openLink(event, 'ubcrew');">
  		<div class="grid-item w3-hover-white">ub<font color="red">crew</font>
		</div>
	</a>
</div>
  
  
<div class="item3">
	<a href="javascript:void(0)" onclick="openLink(event, 'ubstory');">
		<div class="grid-item w3-hover-white">ub<font color="red">story</font>
		</div>
	</a>
</div>
  
  
<div class="item4">
	<a href="javascript:void(0)" onclick="openLink(event, 'ubmission');">
		<div class="grid-item w3-hover-white">ub<font color="red">mission</font>
		</div>
	</a>
</div>  
  
  
<div class="item5">
	<a href="javascript:void(0)" onclick="openLink(event, 'ubvibe');">
		<div class="grid-item w3-hover-white">ub<font color="red">vibe</font>
		</div>
	</a>
</div>                
 
 
<div class="item6">
	<a href="javascript:void(0)" onclick="openLink(event, 'ubpromise');">
		<div class="grid-item w3-hover-white">ub<font color="red">promise</font>
		</div>
	</a>
</div>            


<div class="item7">
	<a href="javascript:void(0)" onclick="openLink(event, 'ubsocial');">
		<div class="grid-item w3-hover-white">ub<font color="red">social</font>
		</div>
	</a>
</div>    

</div>


<div id="ubcrew" class="information w3-animate-opacity">
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div id="ubstory" class="information w3-animate-left" style="display:none">
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
  
<div id="ubmission" class="information w3-animate-top" style="display:none">
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
  
<div id="ubvibe" class="information w3-animate-right" style="display:none">
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
  
<div id="ubpromise" class="information w3-animate-bottom" style="display:none">
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div id="ubsocial" class="information w3-animate-bottom" style="display:none">
    <div class="grid-container-social">
    	<a href="https://www.facebook.com/ubeezen/"><i class="fab fab-flag fa-facebook-square fa-10x"></i></a>
        <a href="https://twitter.com/ubeezen"><i class="fab fab-flag fa-instagram fa-10x"></i></a>
        <a href="https://www.instagram.com/ubeezen/"><i class="fab fab-flag fa-twitter-square fa-10x"></i></a>
        <a href="https://www.pinterest.co.uk/ubeezen/"><i class="fab fab-flag fa-pinterest-square fa-10x"></i></a>
        <a href="https://ubeezen.tumblr.com/"><i class="fab fab-flag fa-tumblr-square fa-10x"></i></a>
	</div>
</div>
</div>
</div>