css position problem. Thanks

瀏覽: 838
回覆: 8

列印

linuxfedora

尊貴會員

帖子: 1430
積分: 1590
註冊時間: 2008-11-25

發短消息加為好友

[網頁設計] css position problem. Thanks

#1

發表於 2021-2-23 05:40 PM

[隱藏]

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

esprithk Another Great Day! Golden Member 帖子 52046 積分 45877 註冊時間 2008-1-18 發短消息加為好友	#2 發表於 2021-2-23 06:00 PM 只看該作者大中小繁簡結果: method2.JPG (25.28 KB) 2021-3-3 02:04 PM 方法(1): method1a.JPG (40.16 KB) 2021-3-3 02:04 PM method1b.JPG (46.98 KB) 2021-3-3 02:04 PM 方法(2): method2a.JPG (45.64 KB) 2021-3-3 02:04 PM method2b.JPG (44.61 KB) 2021-3-3 02:04 PM [ 本帖最後由 esprithk 於 2021-3-3 02:04 PM 編輯 ]
UID 2927122 帖子 52046 精華 1 積分 45877 金幣 1450 閱讀權限 80 來自 Hong Kong 在線時間 9043 小時註冊時間 2008-1-18 最後登錄 2021-3-8 查看詳細資料	回覆引用被引用(1) TOP

esprithk Another Great Day! Golden Member 帖子 52046 積分 45877 註冊時間 2008-1-18 發短消息加為好友	#3 發表於 2021-2-23 06:08 PM 只看該作者大中小繁簡 without height and width, it cannot calculate the position.
UID 2927122 帖子 52046 精華 1 積分 45877 金幣 1450 閱讀權限 80 來自 Hong Kong 在線時間 9043 小時註冊時間 2008-1-18 最後登錄 2021-3-8 查看詳細資料	回覆引用被引用(1) TOP

linuxfedora

尊貴會員

帖子: 1430
積分: 1590
註冊時間: 2008-11-25

發短消息加為好友

#4

樓主發表於 2021-2-23 06:20 PM

引用:

原帖由 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.

回覆引用被引用(1) TOP

linuxfedora

尊貴會員

帖子: 1430
積分: 1590
註冊時間: 2008-11-25

發短消息加為好友

#5

樓主發表於 2021-2-23 06:21 PM

[隱藏]

引用:

原帖由 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

回覆引用被引用(1) TOP

esprithk Another Great Day! Golden Member 帖子 52046 積分 45877 註冊時間 2008-1-18 發短消息加為好友	#6 發表於 2021-2-23 07:40 PM 只看該作者大中小繁簡引用: 原帖由 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 編輯 ]
UID 2927122 帖子 52046 精華 1 積分 45877 金幣 1450 閱讀權限 80 來自 Hong Kong 在線時間 9043 小時註冊時間 2008-1-18 最後登錄 2021-3-8 查看詳細資料	回覆引用 TOP

esprithk

Another Great Day!

Golden Member

帖子: 52046
積分: 45877
註冊時間: 2008-1-18

發短消息加為好友

#7

發表於 2021-2-23 07:44 PM

引用:

原帖由 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

羅尼激光劍

尊貴會員

帖子: 3021
積分: 2076
註冊時間: 2015-10-24

發短消息加為好友

#8

發表於 2021-2-24 09:05 AM

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

回覆引用 TOP

esprithk Another Great Day! Golden Member 帖子 52046 積分 45877 註冊時間 2008-1-18 發短消息加為好友	#9 發表於 2021-3-3 02:05 PM 只看該作者大中小繁簡 updated #2 reply
UID 2927122 帖子 52046 精華 1 積分 45877 金幣 1450 閱讀權限 80 來自 Hong Kong 在線時間 9043 小時註冊時間 2008-1-18 最後登錄 2021-3-8 查看詳細資料	回覆引用 TOP