javascript - 动态改变 block 的位置，基于居中 block 的位置

Question

我试图将一个方 block (红色方 block )放在另一个方 block (绿色方 block )的右上角，方 block 位于窗口的中央。
绿色方 block 是一张图片。
我怎么能做到这一点？

#flag {position: absolute; background-color: green; height:6vw; width:15vw; color: white; text-align:center; }
#introduction {display: table; margin-left: 20%; margin-right: 20%; width: 60%; height: 100vh;}
#caser img {width: 100%; height: auto;}
#caser {padding-top:6vw; padding-bottom:6vw; display: table-cell; height: 100%; vertical-align: middle;}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag">
    <a class="linkme" id="go" target="_blank" href="https://www.google.fr/?gws_rd=ssl">
        Hello
    </a>
</div>

<div id="introduction">
    <div id="caser"><a href="http://www.google.fr">
        <img src="http://bhrabbitrescue.org/wp-content/uploads/2011/02/cute-bunnies-tongues-6.jpg">
    </a>
    </div>
</div>

Answer 1

我认为您需要更改 html。这是我的代码。在 caser 中添加了新的 div caser-inner ，其中添加了 flag div。还更改了 flag css 来放置它。

HTML-

<div id="introduction">
    <div id="caser">
      <div class="caser-inner">    
      <div id="flag">
          <a class="linkme" id="go" target="_blank" href="https://www.google.fr/?gws_rd=ssl">
              Hello
          </a>
      </div>
      <a href="http://www.google.fr">
          <img src="http://bhrabbitrescue.org/wp-content/uploads/2011/02/cute-bunnies-tongues-6.jpg">
      </a>
      </div>
    </div>
</div>

CSS-

#flag {position: absolute; background-color: green; height:6vw; width:15vw; color: white; text-align:center; top: -6vw; right: -15vw;}
#introduction {display: table; margin-left: 20%; margin-right: 20%; width: 60%; height: 100vh;}
#caser img {width: 100%; height: auto;}
#caser {padding-top:6vw; padding-bottom:6vw; display: table-cell; height: 100%; vertical-align: middle;}
.caser-inner{position: relative;}

演示 - https://jsfiddle.net/dhananjaymane11/qu74p7p2/1/