CSS定位两个元素相对于彼此，并保持在调整大小期间 [英] CSS Positioning two elements relative to each other, and keeping there during resize

问题描述

我想将图片模型转换为HTML / CSS，我正在努力让事情正确定位并保持在相对位置。 p> JSFiddle代码：

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

解决方案

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/

这篇关于CSS定位两个元素相对于彼此，并保持在调整大小期间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！