How can I set bullets position to the top right corner with Foundation?

Question

I am trying to position the bullets to the top right corner of the image but when I do and resize the screen the bullets move position.

Here is my code

.orbit-bullets
{
    margin: 0 auto 30px auto;
    overflow: hidden;
    position: absolute;
    float:right;
    bottom:500px;
}

Answer 1

The bottom:500px can be dangerous depending on where you will put Orbit. What I'm saying there is that bullets might not be visible because they are way past the page. That could be the same reason why they are moving. You should have this instead:

.orbit-bullets {
    position: absolute;
    right: 25px;
    top: 5px;
}

If you are not providing Foundation your own class for the orbit, it's best that you override only those three styles.