CSS Notes W07 D02

CSS Notes W07 D02
===
###Buttons with images
```
<style>
#cat-button {
  display: inline-block;
  width:100px;
  padding: 50px 0 0 0;
  height: 0;
  overflow: hidden;
  background: url("cats-button.png") no-repeat 0 0;
  cursor: pointer;
}
</style>

<button id="cat-button">CATS</button>
<!-- <img src="cats.png" width="100" height="50" alt="Name"> -->
```
Don't load alternate images for changing buttons. Make a sprite instead, and move the image.

```
#cat-button{
background-position: 0 -50px;
}
```

ImageOptim will take metadata out of pngs to save space.


##Positioning
* Static
  * Default
* Relative
  * Allows use of properties top/left/r/b
  * Gives z index for layering (-1 is behind the page)
* Absolute
  * Drawn in the right place, but doesnt take up any space
  * Get rid of margins if you use this
  * Useful for interaction, but not layouts
  * if you change its position, it will be relative to its own closest ancestor that is not static
* Fixed
  * Positions relative to the window and it is fixed
  * Use it sparingly