Work in progress
This page is a work in progress.
Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).
Use to position content on top of other content.
Design and coding
Use to control the content position on a page. The browser always positions content on the top left. To modify the default placement, both the x and y position must be defined. The x positions are
pstn-rght-*. The y positions are
pstn-bttm-*. Since both x and y positions work together, the posting is responsive. When the grid system linearizes for smaller viewports, so does the positioning.
|Top positioning||Right positioning||Bottom positioning||Left positioning|
- Use any CSS property other than
.staticwith the layer that's to appear behind the absolute positioned object. For example, grids have a CSS property of
position: relative, so they work well with this design component
- Use to overlay text over an image
- Ensure the image and text relate to each other
- Do not use this component in a way that conflicts with the preceding compliance point(s)
- Do not overlay text over text
- Do not overlay text over an image so that the image is no longer visible
<div class="row"> <div class="col-xs-12"> <a href="#"> <img src=".." class="img-responsive full-width" alt=""> <p class="well brdr-rds-0 well-sm mrgn-bttm-sm mrgn-rght-md mrgn-lft-md opct-90 pstn-bttm-xs pstn-rght-xs">...</p> </a> </div> </div>
Additional add-on features and behaviours are available.
- Date modified: