There are times where you may want to position content over other content - for example you may want to have a button in the middle of an image or a 'New!' label at the top-right of a product listing etc etc. Source Utility Classes stack ships with a number of pre-built CSS classes that let us do just that. By adding a simple class name we can position / 'target' our content in 1 of 5 places relative to the parent container. Here are the available classes:
- Position top-right (
pos-tr) - Position top-left (
pos-tl) - Position center (
pos-center) - Position bottom-left (
pos-bl) - Position bottom-right (
pos-br)
The video below demonstrates using these classes to position a label in various places in a grid item (and over an image).
Using classes like this is a very powerful (and easy) way to achieve effects such as these and it also means that we don't need to clog up our stacks settings in Source for something that you may / may not use.
