Semantic-ui: [Segment] - Piled Segments are not piled when on background colors

[levithomason]

EDIT This description was updated after better investigation.

---

Steps to Reproduce

1. Create any element with a background color and sufficient padding to contain the piles.
2. Create a piled segment within the element with the background color.

Expected
Segments to appear piled. They are not piled as the ::before and ::after pseudo elements use negative z-index values which are placed beneath the background color.

Result
The segment looks like a regular segment.

Testcase

http://jsfiddle.net/2mbjz1p9/

[mvrhov]

The look piled to me FF 48 Windows 10

[levithomason]

It appears they are correct on the doc site now. Mac OSX 10.10.5 (14F1909), Chrome 52.0.2743.116 (64-bit).

However, when placed in a Column, they are still missing:

<div class="column">
  <div class="ui piled segment">
    Pellentesque habitant morbi tristique senectus.
  </div>
</div>

A piled segment requires the containing element to have z-index: 1. Adding this to the Column resolves the issue:

-<div class="column">
+<div class="column" style="z-index: 1;">
  <div class="ui piled segment">
    Pellentesque habitant morbi tristique senectus.
  </div>
</div>

[vinayakkulkarni]

Seems, adding z-index:1; seems to fix it?

Closing this

[levithomason]

Is this being fixed in the CSS or is the suggestion to use an inline style? I think a proper CSS fix in the library is the only thing that makes sense here.

[awgv]

Hi @levithomason, I’m not seeing it, am I missing something? That’s 2.2.9.

[levithomason]

See our React doc example here:
http://react.semantic-ui.com/elements/segment#segment-example-piled

Our doc examples are in a Grid, so the piled Segment does not have the piled look. If you add z-index: 1; to the parent column, then they are shown:

[levithomason]

I see your fiddle renders OK. I'll double check versions and styles here and see if it is something the React docs are loading on top of SUI.

[levithomason]

Got it. The issue is that piled segment pseudo elements use a negative z-index (::before -2, ::after -1). Background colors are at z-index: 0, therefore, the piled pseudo elements are beneath any parent background color and therefore not visible.

http://jsfiddle.net/2mbjz1p9/

[nickschot]

Docs also state something about it: https://semantic-ui.com/elements/segment.html#piled

The problem is also demonstrated on the docs page when clicking on the "show source" button, the pile will appear within a segment and without it's pile visible.

[SunflowerFuchs]

We ran into this issue today. Is there any workaround for the background-color problem? Or is the solution just to either not use background-color, or not use piled?

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[mehranabi]

I have similar issue and fixed by this:
z-index: 0 to parent Segment