Using 'display' displays the Color Picker outside of viewport
I tried to stay as close as possible to the example at http://casesandberg.github.io/react-color/#usage-display to display the picker depending on the current state.

``` javascript
import React from 'react';
import ColorPicker from 'react-color';

class ColorButton extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      displayColorPicker: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  }

  render() {
    return (
      <div>
        <button onClick={ this.handleClick }>Pick Color</button>
        <ColorPicker
          display={ this.state.displayColorPicker }
          onClose={ this.handleClick }
        />
      </div>
    );
  }
}

export default ColorButton;
```

Though I noticed that the color picker is always displayed outside the normal viewport. The direction is depending on the `position` attribute. Since I use the Foundation Framework for styling, I disabled all external loaded css, which means that the only remaining css is react-color's, to eliminate possible side effects. I even put my ColorButton in my RootComponent and disabled all other components. Though the problem persisted.

Also this problem occurred in Safari, Chrome and Firefox. Do the external divs need any special css treatment? How can I make this work?
