CODEWITHSUNDEEP
htmlcssangularjsmaterial-design
Holt
Holt

Reputation: 452

AngularJS material FAB items are behind my toolbar

FABSpeedial items are being put behind a secondary toolbar that my page has. I would have expected these items to be displayed 'on top' of this toolbar.

Please reference this codepen. You will see the speeddial items (1, 2, 3, 4, etc) are being put behind the secondary toolbar (marked as 'Secondary header')

The fab-actions below are all appearing behind the toolbar instead of on top of it. I would guess that this is some sort of z-index issue but I am not seeing where the index is coming from so that I can change it.

<md-fab-actions>
      <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
       1
      </md-button>
      <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
      2
      </md-button>
      <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
       3
      </md-button>
</md-fab-actions>

Upvotes: 1

Views: 258

Answers (1)

Lakmi
Lakmi

Reputation: 1389

you can set style like this style="position:relative; z-index:1" for Secondary header <md-toolbar style="position:relative; z-index:1">

no need z-index to do that.Please reference this codepen

Upvotes: 3

Related Questions