Day 32: Positioning Schemes

Today I went over CSS positioning schemes.  In the example we went over, the overflow property, with a value of hidden, allowed us to "chop off" some extra blank space to the side of the website, to avoid having the browser create a horizontal scroll bar.  When using absolute positioning, we should make sure the containing element has a height.  By default, elements with an absolute position have a higher z-index than elements with a fixed position.  The code below will make the header be "locked" into place, while the elements below (as long as they have a lower z-index) will slide under when the user scrolls down.  It's a neat effect:

.main-header {

position: fixed;

width: 100%;

top: 0;

z-index: 100;

}

I used code similar to this to get my header on my portfolio site to have this effect.  I worked on my portfolio website today, using the things I've learned so far to make it look better.  I also had to move the .wrapper down 140 px offset from top in order to prevent the wrapper from starting off under the header.  I like the new look of my portfolio site, but now I need to fill it with an actual portfolio, haha!  Here's a screenshot of part of the site:

SUMMARY OF CODING SKILLS

Total Treehouse Points: 2,154
Treehouse Points by Subject Matter: HTML 663, CSS 1,461, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 77% of all students."

Badge(s) Earned Today:
Positioning Schemes

Courses Completed:
How to Make a Website
HTML
CSS Foundations

Books Read or in Progress:"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

Hours Spent Coding Today: 4
Total Hours Coding: 138.5