絕對定位內相對定位
[英]Absolute positioning inside relative positioning
問題描述
我的短代碼有點問題。 在這里您可以找到我的網站。
這只是一個帶有按鈕的圖像。 我的問題是，現在當我要縮放瀏覽器窗口時，按鈕會四處移動。 因此，該按鈕可以在其他瀏覽器，計算機，手機，...上的任何其他位置。
這是我的代碼：
<center>
<div style="position: relative; left: 0; top: 0;">
<img src="/images/home2.png" style="position: relative; bottom: 0; left: 0;"/>
<div style="position: absolute; right: 300; bottom: 250;">
<a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '" /></a>
</div>
</div>
</center>
4 個解決方案
解決方案1
1 2014-09-15 14:36:12
嘗試這個：
<div style="position: relative; left: 0; top: 0; margin: 0 auto; width:892px">
<img src="/images/home2.png" style="position: relative; bottom: 0; left: 0;">
<div style="position: absolute; right: -145px; bottom: 250;">
<a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"></a>
</div>
</div>
解決方案2
1 2014-09-15 14:38:08
問題是，您的div是瀏覽器窗口的全角， position: absolute適用於div的全角，而不是圖像的寬度。 此外，您應該將樣式導出到extern .css文件，內聯.css不是最好的技術。
這是你應該改變的
<div style="position: relative;background: url(/images/home2.png);width: 800px;height: 800px;">
<div style="position: absolute; right: 30px; bottom: 125px;">
<a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '">
</a>
</div>
編輯：
這是用CSS實現您想要的更好的方法
的HTML
<div class="container">
<div class="button">
<a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '">
</a>
</div>
的CSS
.container{
position: relative;
background: url(/images/home2.png);
width: 800px;
height: 800px;
margin-left: auto;
margin-right: auto;
}
.button{
position: absolute;
right: 30px;
bottom: 125px;
}
解決方案3
0 2014-09-15 14:36:50
這可以是選項之一。 這樣可以將圖像固定在固定的位置。 試試看
<div style="position: fixed; left: 0; top: 0;">
<img src="/images/home2.png" style="position: fixed; left: 453; top: 449;"/>
<div style="position: absolute; right: 300; bottom: 250;">
解決方案4
0 2014-09-15 14:44:28
這個代碼有很多問題:)
首先，您無需在具有position:relative;元素上設置left: 0或top: 0 position:relative; 。 當您在相對定位中使用坐標時，這意味着：在其當前位置頂部的XXpx處移動。 因此，當您輸入0時，您的意思是：留在當前位置 。
然后，我清理了您的代碼：
<body background="http://www.pugganagga.com/images/giftly.png" text="#990000" link="#0000CC" vlink="#000066" alink="#000000">
<div style="width: 800px; margin: 10px auto; position: relative; ">
<img src="/images/home2.png" >
<div style="position: absolute; right: 50px; bottom: 250px;">
<a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"></a>
</div>
</div>
</body>
我刪除了過時的center標記，刪除了無用的“ position：relative”，並使用了坐標單位（200px而不是200，如CSS中那樣，什么也沒有）。
在相對內部定位絕對元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.