CSS 将两个元素相对于彼此定位，并在调整大小时保持在那里

Question

我正在尝试将图像模型转换为 HTML/CSS，但在调整窗口大小时，我正在努力让事物正确定位并保持相对位置。

JSF中间代码：

http://jsfiddle.net/victorhooi/ZcrCc/

全屏 JSFiddle 输出：

http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/

这是图片模型：

我不知道如何将粉色和蓝色小鸟固定在字体上，并让它在不同的分辨率和调整窗口大小时都保持在那个位置。我曾想过使用max-width 100% 和height: auto;，但这似乎不太奏效。

基本上，我希望粉红色的小鸟始终位于小写“a”的顶部，蓝色的小鸟始终位于“r”的右下角，而与号垂直居中并留在那里。

这是 CSS：

/*TODO - There should be a way to do the two below using child selectors?*/

#alpha-bio-heading {
    color: #faaacd;
}

#victor-bio-heading {
    color: #85b1d8;
}

/*# TODO - Is there a way to fix this better for page resizes?*/
#pink-bio-bird {
    position: absolute;
    right: 55px;
    top: 28px;
}

#blue-bio-bird {
    position: absolute;
    right: 15px;
    top: 85px;
}        

/*TODO - There should be a better way to centre this within the box.*/
#ampersand {
    position: relative;
    bottom: -120px;
}

Answer 1

你应该

• 将鸟类图像放入h1 元素中。
• 使h1 元素相对定位。
• 根据需要调整图像的左/上位置。

所做的更改

    #alpha-bio-heading {
        color: #faaacd;
        position:relative;
    }

    #victor-bio-heading {
        color: #85b1d8;
        position:relative;
    }

    #pink-bio-bird {
        left: 210px;
        position: absolute;
        top: 10px;
    }

    #blue-bio-bird {
        left: 245px;
        position: absolute;
        top: 60px;
    } 

http://jsfiddle.net/ZcrCc/3/ 上的演示