Javascript 图像在同一行中时commandLink不工作

这是我的密码。我在面板网格中有两个图像，这两个图像放在动画Javascript渐变的上方。当左侧图像与右侧的注销图标平行放置时（如图中所述），注销功能不起作用。当我删除左侧图像时，注销功能正在工作。请提供此问题的解决方案

<h:panelGrid columns="2"  styleClass="topVerticalAlign" style="width: 100%;background: -webkit-linear-gradient(top left, #99D6FF 0%, #9E5EDF 100%);">                
    <p:graphicImage value="/resources/images/zDVI-TPF_Logo.png" height="50" width="150" />             
    <h:panelGrid columns="2" style="text-align: right; float: right">
        <p:graphicImage value="/resources/images/user.png" height="25px" width="25px" />  
        <p:outputLabel value="Welcome,  #{userBean.username}"/>
        <h:outputText value=""/>
        <p:commandLink  action="#{userController.doLogout}">                         
            <p:graphicImage id="logoutIcon" value="/resources/images/logout.png" height="25px" width="25px" />                        
            <p:tooltip for="logoutIcon" style="font-weight: bold" value="Logout" showEffect="clip"  />
        </p:commandLink>
    </h:panelGrid>
</h:panelGrid>

---

一个建议。不要将panelGrid用于可视容器。我在这里看到了Primefaces，因此我强烈建议对JS渐变之类的东西使用p:outputPanel layout=“block”（渲染为DIV）。graphicImage和commandLink容器也是如此

<p:outputPanel id="gradientDiv" style="position: relative; ...
    <p:outputPanel id="logoWrapper" style="position: absolute; ...
        ...logo contents
    <p:outputPanel id="userMenuWrapper" style="position: absolute; ...
        ...user menu contents