CSS Positioning

[jessicakstudio]

I am trying to have my social media icons on top of a border. I have played with "Position" & "Z-Index" and can't seem to figure it out.

http://k-fancy.com/

[neilgee]

Try adding an extra bit of CSS to the utility bar

.utility-bar {
padding-bottom: 30px;
}

---

Neil Gee
WP Beaches
Coolest Guides

[jessicakstudio]

I am wanting the icons to sit on top of the border, instead of the border being on top of them. So the border goes through the icons, as it is now, but so the icons are on top.

That does work, but it isn't what I am trying to accomplish. Any insight?

[bandj]

I think I would try using a background image, like a 1 pixel black dot, and position that for the utility bar rather than using the title top border.

[Lauren @ OnceCoupled]

You can use z-index: 9999; for example, but you need to add something like position: relative; to "activate" it. Z-index only works on positioned elements. (If you're curious, here's an article: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/) I would apply those styles to .utility-bar-right.

You'll need to use non-transparent icons for this, as you can see the line through through the back of them. Alternatively, you could use background-color: #FFF; and maybe border-radius: 15px; (along with browser compatibility alternatives) to add a white background with CSS.

Cheers,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[jessicakstudio]

Thanks Lauren, that article really helped and I got it figured out! 🙂

[Author]

Posts