Orbit css selectors

Question

I'm using Foundation Orbit slider. It's working fine except that I need to do have some css (move the caption) applied to a specific slider on the page.

If I use following selector it does the change, only problem it's a global change.

.orbit-wrapper .orbit-caption
{
    bottom:-30px;
}

I have tried different selectors with the id of the container div but it never gets applied.

#promotion .orbit-caption
{
    bottom:-30px;
}

If I check the css values in the browser, the correct values are there, but they are not applied to the element somehow. Only when I change the selector as in the first example above I get the change.

I'm not an expert in css, but the selectors I have tried with do work in normal circumstances.

What do I do wrong?

Answer 1

Did you make sure the element has position: relative;?

.orbit-wrapper .orbit-caption
{
    position: relative;
    bottom:-30px;
}

Without that or position: absolute; the "bottom" property won't do anything.