![]() ![]() ![]() Border: optionally, depending on the colors involved, you may need a subtle border or shadow.Floating appearance: It should appearing to float above the corner, rather than be inside.Shape: ideally round, but what happens if the number gets long?.Size: not just relative to what it tags, but also what happens if the number gets long?.Scroll further down to see a demo of the currently accepted answer.Īs other answers say, absolute positioning with a relatively positioned parent is a very reliable way to position the indicator in the upper right corner (or any corner you prefer).īut there are other very important considerations: The above image is a snapshot of running the Live Demo below. Position: absolute /* Position the badge within the relatively positioned button */Ī responsive solution using font-relative sizing and shaping * Make the badge float in the top right corner of the button */ Padding: 2px 5px /* Add some padding so it looks nice */ Position: relative /* All 'absolute'ly positioned elements are relative to this one */ TL DR they make the icon buttons stack from left-to-right instead of top-to-bottom */ * Define what each icon button should look like */ĭisplay: inline-block /* Inline elements with width and height. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |