Stack component z-index does not work

jiny10 · 22 Jun 2022, 10:44

I, tried to build my "stack" menu in one direct vertical line. According to Primefaces documentation I have to override .ui-stackt style to change this z-index. If I understood well, this z-index is responsible for the shift of each element of menu. I have tried to apply this z-index with different values, but I did not reach any visual impact, why?

This PrimeFaces Stack component page https://www.primefaces.org/showcase/ui/ ... wid=d0061

Code: Select all

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">


<h:head>
    <h:outputStylesheet name="primeicons/primeicons.css" library="primefaces"/>
    <h:outputStylesheet name="primeflex/2.0.0/primeflex.min.css" library="webjars" />

    <style type="text/css">
        .ui-stack {
            z-index: 1000;
        }
    </style>

</h:head>

            <p:stack icon="/resources/images/basket.png"
                     openSpeed="600"
                     closeSpeed="600">

                <p:menuitem value="Exit"
                            action="#{loginBean.logout}"
                            icon="/resources/images/close.png"/>

                <p:menuitem value="Archive"
                            url="/luis_web/manage/archiveList.xhtml"
                            target="_blank"
                            icon="/resources/images/archive.png"/>


                <p:menuitem value="Person"
                            target="_blank"
                            url="#"
                            icon="/resources/images/users.png"/>


                <p:menuitem value="Case"
                            url="/luis_web/manage/caseList.xhtml"
                            target="_blank"
                            icon="/resources/images/cases.png"/>


                <p:menuitem value="Company"
                            url="#"
                            target="_blank"
                            icon="/resources/images/companies.png"/>

                <p:menuitem value="Schedule"
                            url="/luis_web/app/schedule.xhtml"
                            target="_blank"
                            icon="/resources/images/schedule.png"/>


                <p:menuitem value="New"
                            target="_blank"
                            url="document.xhtml?folderId=#{foldersBean.folderEntitySelected.id}"
                            icon="/resources/images/application.png"/>
            </p:stack>


        </div>

    </h:form>


</h:body>
</html>

22 Jun 2022, 19:41

Looks like it is working on the showcase? https://www.primefaces.org/showcase/ui/menu/stack.xhtml

jepsar · 23 Jun 2022, 13:50

Z-index has nothing to do with getting the items "one direct vertical line".

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

https://developer.mozilla.org/en-US/doc ... SS/z-index

To get them to line up, use this CSS:

Code: Select all

.ui-stack ul li {
    left: 0 !important;
}

Stack component z-index does not work

Who is online