CSS Positioning two elements relative to each other, and keeping there during resize

问题

I'm trying to convert a image mockup into HTML/CSS and I'm struggling to get things positioning correctly and staying in relative position as I resize the window.

JSFiddle code:

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

Full-screen JSFiddle output:

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

Here is the image mockup:

I'm not sure how to pin the pink and the blue bird to the type, and have it stay in that position both at different resolutions and as you resize the window. I thought of using max-width 100% and height: auto;, however that didn't seem to quite work.

Essentially, I'd like the pink bird to always be on top of the lowercase "a", and the blue bird to always be where it is at the bottom right of the "r", and the ampersand to be vertically centred and stay there.

This is the 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;
}

回答1:

You should

put the bird images inside the h1 elements.
make the h1 element to be relatively positioned.
adjust the left/top positioning of the images to what you want.

changes made

    #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;
    }

Demo at http://jsfiddle.net/ZcrCc/3/

来源：https://stackoverflow.com/questions/19101932/css-positioning-two-elements-relative-to-each-other-and-keeping-there-during-re

标签

html

css

position