Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Emil Wallgren
Emil Wallgren
11,737 Points

Placing content that doesnt affect other content

Hi!

I would like to put a facebook-like button on a web-page, but when I do, all of the other content shifts position. Is there a possibility to use a feature which makes the like button not affect other content on the page?

Kind of like putting a post it on a painting :-P

/Emil

1 Answer

Ben Griffith
Ben Griffith
5,808 Points

I think what you're after is absolute positioning.

position: absolute;

This will absolutely position the element wherever you specify. You can choose different positions using the top, left, bottom and right properties.

top: 0;
right: 0;

Will position your element in the top right corner etc (no surprises there!)

One important thing to note is that your absolutely positioned element will position itself in relation to the body - unless you have a parent element which is relatively positioned.

Take a look at http://css-tricks.com/absolute-positioning-inside-relative-positioning/ for a clearer explanation

Emil Wallgren
Emil Wallgren
11,737 Points

Hi Ben :-)

Things are still moving. www.kockakuten.nu (this is the web-page I'm workin on)

I want the facebook-button top right, without it affecting the nav menu postitioning. But it's not working

Ben Griffith
Ben Griffith
5,808 Points

That's strange!

Could you show me the css that you have on the button?

Emil Wallgren
Emil Wallgren
11,737 Points

I got it to work now. In the css, I had just written the name of the div like this.

.fb-button

But when I wrote it like this:

header .fb-button (where header is the name of the div containing the button) it worked :-)

Thanks anyway!

/Emil