Question

我试图将一个块（红色的）放在另一个（绿色的）的右上方，该块位于窗口的中心。
绿色块是图片。
我怎么能做到这一点？

#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-inner中添加了新的div caser，其中添加了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/

Answer 2

您需要将您的（div定义它）红色元素放在绿色（div定义它）元素中。

由于绿色元素已经有absolute position，您只需要在绿色元素中使用这些CSS规则：

position: absolute; top: 0; right: 0;

如果您想动态地执行此操作：

1）定义一个事件来触发它（例如鼠标点击）;

2）使用jQuery传递我们在该事件中定义的CSS规则。

例如：

$("#the trigger element id here").click(function(){
    $("#your green element id here").css({"position": "absolute", "top": "0", "right": "0"})
})

你可以使用你想要的事件，你需要有jQuery。

Answer 3

首先，重新排列你的html，这样两个元素都是引入的子元素。从那里，您可以在介绍中设置display：flex属性。这允许使用flex-direction：column来堆叠两个元素。从那里，从#flag div获取链接样式，并将css规则分配给<a>标记。通过将#flag div设置为100％宽度，块级div，我们可以使用justify-content将按钮一直推到图像内容的右侧：flex-end

＆＃13;

#flag {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#flag a {
  background-color: green; 
  height: 6vw; 
  width: 15vw; 
  color: white; 
  display: flex;
  align-items: center;
  justify-content: center;
}

#introduction {
  display: flex;
  flex-direction: column;
  justify-content: 
  margin-left: 20%; 
  margin-right: 20%; 
  width: 60%; 
  height: 100vh;
}

#caser img {
  width: 100%; 
  height: auto;
}

#caser {

}

＆＃13;

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

＆＃13;

动态更改块的位置，将位置基于居中的块

3 个答案: