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
M Glasser
10,868 PointsIs "position: left" a thing in CSS?
Was trying to figure out how that cool hamburger button that treehouse uses works (see upper left corner) by viewing it with the dev tools. Noticed there's a "position:left" in the css that styles the button. What, if anything, is this supposed to be doing?
.hamburger-button{ border:0; background:none; cursor:pointer; position:absolute; height:30px; padding:0; z-index:1; transition:opacity 600ms 0s ease, top 600ms 0s ease; position:left }
4 Answers
Steven Parker
243,318 PointsThe "position" property sets how an element is positioned, not where. See this MDN page for more information.
You may be thinking about "float: left". Here's the MDN float page.
M Glasser
10,868 PointsWell, I thought I understood the difference until I looked at the source. So this must be some kind of typo in the source?
Steven Parker
243,318 PointsWhat "source" are you referring to? Can you provide a link to the page where you saw it?
M Glasser
10,868 Pointsa stylesheet from the team treehouse website found here:
it's the hamburger menu that pops up in the mobile view of this site.
Steven Parker
243,318 PointsYes, that's a mistake. You can expect the "position: left" directive to be ignored by CSS.
It's easy to imagine how a mistake could be overlooked in a file that extensive and complex, especially since it does not cause any visible issues.
M Glasser
10,868 PointsOk cool! I'm excited I found a mistake! Interesting that the browser just falls back to the last valid property value.
Steven Parker
243,318 PointsIt actually just ignores any invalid properties or values.
Parth Gada
8,484 PointsNO, The position property specifies the type of positioning method used for an element.
There are four different position values:
static relative fixed absolute sticky
Steven Parker
243,318 PointsHi Parth Gada — you can save yourself some effort if you read the comments and answers already provided before posting a duplicate of something already said. Also, you listed all 5 of the "four" position values.
Denis Omerović
Full Stack JavaScript Techdegree Student 2,607 PointsDenis Omerović
Full Stack JavaScript Techdegree Student 2,607 PointsThere is no value left for position property. Position only accepts static, relative, fixed, absolute, sticky. So in this case position is absolute, and left is set to 0 (left: 0;). That's why icon appears on the left side.