Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The best way to achieve this is by using <strong>absolute positioning</strong>: <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Create the blue navigation bar */ .navbar { background-color: #3b5998; font-size: 22px; padding: 5px 10px; } /* Define what each icon button should look like */ .button { color: white; display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */ position: relative; /* All 'absolute'ly positioned elements are relative to this one */ padding: 2px 5px; /* Add some padding so it looks nice */ } /* Make the badge float in the top right corner of the button */ .button__badge { background-color: #fa3e3e; border-radius: 2px; color: white; padding: 1px 3px; font-size: 10px; position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Font Awesome is a great free icon font. --&gt; &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/&gt; &lt;div class="navbar"&gt; &lt;div class="button"&gt; &lt;i class="fa fa-globe"&gt;&lt;/i&gt; &lt;span class="button__badge"&gt;2&lt;/span&gt; &lt;/div&gt; &lt;div class="button"&gt; &lt;i class="fa fa-comments"&gt;&lt;/i&gt; &lt;span class="button__badge"&gt;4&lt;/span&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload