動態地改變塊的位置，將位置定位在居中塊上

我試圖在窗口中居中的另一塊（綠色塊）的右上方放置一個塊（紅色塊）。
綠色塊是一張圖片。
我怎麼能做到這一點？動態地改變塊的位置，將位置定位在居中塊上

#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>

來源

2016-06-18 Yagayente

我發佈了我的第一個想法......但終於不是很好。你應該尋找一個腳本來找到圖像在頁面中的確切位置，以計算給你的綠色塊的位置。尋找[jQuery偏移量]（http://www.w3schools.com/jquery/css_offset.asp） –

我認爲你需要改變你的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/

來源

2016-06-18 17:56:32 DJAy

你需要把你的（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的。

來源

2016-06-18 17:53:14

首先，重新安排你的HTML，這樣兩個要素是引進的孩子。從那裏，你可以在介紹上設置一個顯示：flex屬性。這允許使用flex-direction：column來堆疊這兩個元素。從那裏，取出#flag div的鏈接樣式，並將css規則分配給<a>標籤。通過設置#flag DIV爲100％的寬度，塊級的div，我們可以一路推動按鈕將圖像內容與證明內容的右側：彎曲端

#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 { 
 

 
}

<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>

來源

2016-06-18 18:00:02

動態地改變塊的位置，將位置定位在居中塊上

回答

相關問題