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
Ronav Saundh
8,070 PointsWhat Is The Left: 80PX All About?
Hi, Could anyone please explain how the left: 80% works in the transition. The icon moves to right but the teacher has written the opposite. Thanks.
3 Answers
rydavim
18,814 PointsSo the .btn-icon is positioned absolutely. This means that left refers to how it is positioned relative to the left edge of it's parent container, in this case the button. So you're transitioning from 45% to 80% relative to the left side. Here are some images that might help clarify things:
.btn-icon { left: 45%; }
.btn-icon { left: 80%; }
If that doesn't do it for you, let me know and I'll try to explain a different way. Happy coding!
Joseph Dalton
12,489 PointsHey Ronav,
I think positioning is one of the more complicated parts of learning CSS, since it usually involves rules on more than one element.
So a couple rules for positioning:
Absolute positioning positions an element in relation to it's first positioned parent, and takes the element out of the normal flow of elements (like it loses its place on the page). (it's like moving a Jenga block, then having the rest of the blocks slide down to take the spot)
Relative positioning positions the element in relation to it's normal place on the page, and the page retains the space the element would have taken up. (this would be like moving the Jenga block, but the spot where the block was stays empty, like you'd expect)
And for the positioning properties, left:... positions the left side of the element from the left side of whatever it's positioned against (determined by absolute vs relative vs fixed), by whatever value is given. rydavim gave a pretty sweet break down of that above.
I would suggest playing with them a little bit. Add a the properties left: 10px; top: 10px; to an element, then toggle between the properties position: absolute; and position:relative, and even position: fixed;. That should give you a good idea.
I hope that helps!
Ronav Saundh
8,070 PointsHi, Thanks a lot for your replies. I have understood the concept well. Ron
Ronav Saundh
8,070 PointsRonav Saundh
8,070 PointsHi, Thanks for helping but I don't know what absolute positioning means. I think you were saying it is relative to it's parent container. Does that mean if we type left: 100%, the object reaches the end of the parent on the right. And can you please explain what right: 100% will do. I would also like to know about the different types of positioning and how they work. Thanks for your help. Ron
rydavim
18,814 Pointsrydavim
18,814 PointsYes, if you use
left: 100%the icon will be outside of the button on the right side. Usingright: 100%would produce the opposite result..btn-icon { left: 100%; }.btn-icon { right: 100%; }I would strongly encourage you to try these out for yourself by altering the CSS and then using inspect element in your browser. It will start to make a lot more sense once you experiment and play around with it a bit.
It looks like Joseph Dalton has got you covered with some solid explanations of CSS positioning types, but let us know if you need any more examples or clarifications.