Ah Ha Moments – Handcrafted CSS
I recently started reading Handcrafted CSS by Dan Cederholm (just want to add that I am not being paid to blog about this book, it’s amazing, go buy it). I just finished chapter 1 and there are a few Ah Ha! moments I want to share. Most of these are uninteresting to your seasoned CSS cowboy. For me it brings a greater understanding of CSS and a sharper tool in my toolbox.
Ah Ha Moment #2: .myclass { position: relative; }
If you look at the textbox above we have a simple textbox with a calendar logo right after it (Sorry google reader fans, embedded jsfiddle doesn’t show up yet. Promise I’ll try and fix that.).
This is a total fail. I want the logo to be inside of the textbox on the right side. To do that we are going to use { position: absolute; }. Here’s where you say, “wait I thought your Ah Ha moment was { position: relative; }”. Ok so what happens when we set position absolute on the icon like this
Whoa! The icon went way over to the top right of the jsfiddle. That’s because we are absolutely positioning the element relative to the closest parent. In this case the closest parent element that is { position:relative; } is the <body> tag. That’s no good. No worries its easy to fix.
Bam! Now the closest relative parent element is the div wrapping both the textbox and the icon. Now just tweek the top and right values until the icon is where you want it.
Summary tl;dr;
Absolute positioning is not evil if you are positioning it relative to some kind of container.
Always herpin, but not derpin
-Ryan