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 CSS Layout Techniques Flexbox Layout Animating Flexbox

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points
Posted by Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Why give nav links a relative positioning to position icons inside them?

Hello,

About one minute into this video:

https://teamtreehouse.com/library/css-layout-techniques/flexbox-layout/animating-flexbox

Guil has the icons positioned above the nav links. To force them into the links (visually), he gives the nav links a relative positioning. Why and how does this work? Why not work on the ".main-nav a : : before" property to reposition the icons, working with offset for example? (which would seem to me more intuitive)

2 Answers

Vince Brown
Vince Brown
16,249 Points
Vince Brown
Vince Brown
16,249 Points

Hey Dekin, The answer is all about positioning. Since the "main-nav a" has no position set and the :before elements positioning is set to absolute, the :before position is being based off a different parents positioning.

.main-nav a {
  display:block ;
  /* etc ... */
}

When an element has a position of absolute like ".main-nav a::before" that absolute position is based off of the nearest parent element that has a position set explicitly. 

.main-nav a::before {
  font-family: 'icomoon';
  content: attr(data-icon);
  color: #fff;
  position:absolute; /* This positioning is based off nearest parent element w/ position set */
  top: 10px;
}

So when Guil goes ahead and gives "main-nav a" a position of relative that is telling the :before element that is positioning is now going to be based off of "main-nav a" (its closest parent)

.main-nav a {
  display:block 
  position: relative;  /* ::before absolute positioning is now based off of the .main-nav a since it has a position explicitly set and is the nearest parent */
}

Cheers, Vince

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points
Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Many thanks Vince for this very clear explanation.

Does this mean that the icon is using Main-wrapper or Main-header as parent elements rather than main-nav a ? Is that why they are in the main-header but above the nav elements? Does this mean that main-header has its position set explicitly? (I don't know where to find Guil's code for this video to check if this is or not the case...)