HTML and CSS Reference
In-Depth Information
and for good measure, a 0px margin has been added to prevent any gaps
between the elements.
The next thing to do is to style the #card-movie_search_results card. When
making a search, the card should show above all elements on the page. You
can do this by setting the z-index. The z-index dictates where in the stack of
elements the element should exist. Setting a high number will usually place the
element at the top of the stack. 50 is used in this case.
/**
* Individual Card Styles
*/
#card-movie_search_results {
z-index: 50;
}
The next step is to set the deck and card styles. As you can see, SASS nesting
is used here to nest the different card states within the deck. When the SASS file
is rendered the appropriate CSS will be generated. You will want to set the
decks position to relative. This will allow absoloutley positioned cards within the
deck to be positioned relatively to the parent deck rather than the whole
viewport.
/**
* Deck styles
*/
.deck {
position: relative;
}
You now need to style any element with the .card class too. Each card should
be the same width and height of the deck but be positioned offscreen so that
the user cannot initially see it. When the .active class is added to any .card
element, it should be brought back into view. This can be achieved by setting
the initial left position to a negative value equivelant to the width of the card, -
100% in this case. When you want the card to be brought back into view, a
position of 0px has been set for the .active styling.
/**
* Deck styles
*/
.deck {
position: relative;
