• 瀏覽: 838
  • 回覆: 8
[隱藏]
I want to place 2 images on top of each other (Using position absolute) and want to have a button under the image. But i tried many different way still cannot work, the image height and aspect ratio may change using javascript. Could anyone tell me how? Thanks

<div class="relative" style="background-color:red;position:relative">
  <div style="position:relative;">
    <div style="position:absolute;">
        <img src="https://s.yimg.com/fz/api/res/1.2/Qtvq9Dn9szgyB3jeRMdI9w--~C/YXBwaWQ9c3JjaGRkO2ZpPWZpbGw7aD0yODI7cHhvZmY9MDtweW9mZj0wO3E9OTU7dz01MDA-/https://s.yimg.com/am/60d/33afb62ded1c15f21380578eb03cd632"/>
    </div>
   
    <div style="position:absolute;">
        <img src="https://www.google.com.hk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
    </div>
   
  </div>
  <div style="position:absolute;">
      <button>How to put under the picture.</button>
  </div>
</div>



回覆 引用 TOP

結果:



方法(1):




方法(2):




[ 本帖最後由 esprithk 於 2021-3-3 02:04 PM 編輯 ]



without height and width, it cannot calculate the position.


引用:
原帖由 esprithk 於 2021-2-23 06:08 PM 發表

without height and width, it cannot calculate the position.
You mean i have to set the width and height of the image?

I want the 2 overlay images (Both images are same width and height) to be shown with 50% of the width of the broswer, so resize broswer will change the image size, and i want the button always show under the image event resized the broswer.



[隱藏]
引用:
原帖由 esprithk 於 2021-2-23 06:00 PM 發表

you try one image first.
check result

***you must set height and width!!!*

<div style="position:relative">img 01 here;
<div style="position:absolute">img 02 here;</div>
</div>

what do you get?

https://www.w3schools.com/css/css_positioning.asp
If 1 image use absolute another use relative, they will not overlay each other, i need both same size images to overlay each other.. Thanks



引用:
原帖由 linuxfedora 於 2021/2/23 18:21 發表


If 1 image use absolute another use relative, they will not overlay each other, i need both same size images to overlay each other.. Thanks
updated #2 reply

[ 本帖最後由 esprithk 於 2021-3-3 02:05 PM 編輯 ]



回覆 引用 TOP

引用:
原帖由 linuxfedora 於 2021/2/23 18:20 發表


You mean i have to set the width and height of the image?

I want the 2 overlay images (Both images are same width and height) to be shown with 50% of the width of the broswer, so resize broswer w ...
updated #2 reply

[ 本帖最後由 esprithk 於 2021-3-3 02:05 PM 編輯 ]



回覆 引用 TOP

咁樣得唔得?
隨著main-container嘅width改動,兩張圖也是main-container嘅100%高100%寬


<style>
.main-container {
        position: absolute;
        width: 60%;
}
.top-image {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
}
.bottom-image {
        position: relative;
        width: 100%;
        height: 100%;
}
button {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: -30px;
        cursor: pointer;
        background: #F00;
border-radius:.35rem;
}
</style>

<div class="main-container">
  <img class="top-image" src="https://www.google.com.hk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
  <img  class="bottom-image" src="https://s.yimg.com/fz/api/res/1.2/Qtvq9Dn9szgyB3jeRMdI9w--~C/YXBwaWQ9c3JjaGRkO2ZpPWZpbGw7aD0yODI7cHhvZmY9MDtweW9mZj0wO3E9OTU7dz01MDA-/https://s.yimg.com/am/60d/33afb62ded1c15f21380578eb03cd632"/>
  <button>How to put under the picture.</button>
</div>

[ 本帖最後由 羅尼激光劍 於 2021-2-24 09:06 AM 編輯 ]



回覆 引用 TOP

updated #2 reply


回覆 引用 TOP

熱門主題
相關主題
[按此隱藏 Google 建議的相符內容]