我试图将一个方 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>
最佳答案
我认为您需要更改 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;}
关于javascript - 动态改变 block 的位置,基于居中 block 的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37899502/