CSS定位两个元素相对于彼此,并保持在调整大小期间 [英] 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;
}
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屋!