CSS相對定位高度相對於母體

試圖讓一些「按鍵」與動態背景圖像移動。到目前爲止，背景圖片不會調整大小。相對定位多個按鈕（包含工具提示和鏈接）的作用太大......部分......將它們從相對百分比左移到右，而不是從上到下。垂直方向上，按鈕只是堆疊並保持在該位置。我們的目標是讓按鈕靠近圖像上的相同位置，無論它的大小如何。我錯過了什麼？我不理解父母/孩子的流程嗎？編碼錯了？CSS相對定位高度相對於母體

CSS ---

html { 
background: url(img/tundrabiome.jpg) no-repeat center center fixed; 
background-size: cover; 
} 


body { 
font-family: helvetica, "times new roman", sans-serif; 
font-size: 12px; 
width:100%; 
height: 100%; 
} 

#titleBtn {position: relative; top: 30%; left: 34%; background: url(img/tundratitle.png) no-repeat; width:379px; height:127px;} 

#bearBtn {display: inline-block; position: relative; top: 65%; left: 24%; background: url(img/bearBtn.png) no-repeat; width:200px; height:200px;}

的Html

<html> 
<body> 


<a href="#" class="tooltip"> 
<div id="titleBtn"> 
    <span style="margin-top:120px; margin-left:30px"> 
    <strong>Tundra Biome</strong><br /> 
    Lots of really cold information of life in an arctic tundra. Lots of really cold information of life in an arctic tundra. Lots of really cold information of life in an arctic tundra. 
    </span> 
    </div> 
</a> 


<a href="#" class="tooltip"> 
    <div id="bearBtn"> 
    <span style="margin-top:-30px; margin-left:-50px"> 
     <strong>Bear</strong><br /> 
    This is a really cute bear, isn't it? 
    </span> 
    </div> 
</a>

我可以居然有「按鈕」是相對於背景圖像（並保持提示和鏈接上的按鈕？）或我是否必須回到所有事物的絕對位置？

來源

2014-09-22 Curtis Bracher

有什麼理由-not-使用絕對定位？

你並不需要的一切絕對位置，但你可能會考慮使用絕對定位的按鈕本身。

「絕對」甚少命名...當一個項目設置爲絕對的，它會被絕對定位相對於有指定的「位置」屬性，其最接近的父。將按鈕的父級設置爲「靜態」，然後將按鈕設置爲「絕對」，相對於該「靜態」父級。這有點令人困惑，因爲默認情況下，父項是「靜態」的，但實際上將其指定爲「靜態」可以將它的子項與「絕對」錨定在一起。（你也可以設置父爲「相對」或「絕對」。只要你將它設置爲-something-，就變成了「絕對」孩子錨定到的東西。）

來源

2014-09-22 04:26:16 johntrandall

謝謝你的解釋，約翰。很好，我可以補充一下。我想我現在明白了。事實上，我將所有的按鈕div切換到絕對位置，並給它們上下左右的位置，現在一切都在兩個方向上進行......接下來是媒體查詢，因此我可以調整按鈕的大小 – 2014-09-22 06:25:39

CSS相對定位高度相對於母體

回答

相關問題