css - 如何在 GWT 中的另一个小部件(图像)之上显示一个小部件(Horizo​​ntalPanel)？

Question

我试图让 Horizo​​ntalPanel 中的两个按钮显示在图像之上。不是在上方，因为您看到了按钮，然后进一步向下查看页面并看到了图片，而是您查看了图片，它上面有按钮。

这是我目前在 Page.ui.xml 文件中的代码:

 <g:FocusPanel ui:field="profileImagePanel" addStyleNames="{style.headerImage}">
     <g:AbsolutePanel addStyleNames="{style.innerImagePanel}">
         <g:Image ui:field="profileImage" addStyleNames="{style.profileImage}"/>
         <g:HorizontalPanel ui:field="imageEditButtons" addStyleNames="{style.imageEditButtons}">
             <w:MultiUseButton ui:field="clearImage" addStyleNames="{style.change}" type="secondary" text="{i18n.clearImage}" visible="false"/>
             <w:MultiUseButton ui:field="changeImage" type="secondary" text="{i18n.changeImage}" visible="false"/>
         </g:HorizontalPanel>
     </g:AbsolutePanel>
 </g:FocusPanel>

样式是:

.headerImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
}

.profileImage {
    width: 150px;
    position: relative;
}

.change {
    float: right;
}

.headerImage a {
    display: block;
}

.imageEditButtons {
    width:100%;
}

.innerImagePanel {
    width:150px;
}

我试过使用 FlowPanel 而不是 AbsolutePanel，但这不起作用。我试过制作 profileImage position:relative 和 imageEditButtons position:absolute 但这搞砸了页面其余部分的整个显示。我还尝试设置 imageEditButtons margin-top:-20px 但它位于图像下方而不是顶部。如果我将 Horizo​​ntalPanel 放在图像之前的 AbsolutePanel 中，则按钮位于图像上方，如果我尝试更改上边距，它会将按钮和图像向下移动。

我的想法已经用完了。任何有关使这项工作有效的方法的建议都将不胜感激。

Answer 1

应用样式 background-image 而不是使用小部件 Image。以下是我对 UiBinder 文件内容的想象:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
     xmlns:g="urn:import:com.google.gwt.user.client.ui">
   <ui:style>
       /* requirement style */
       .myPanel {
           width: 200px; /* width of your background image */
           height: 400px; /* height of your background image */     
           background-image: url(images/myimage.jpg); /* your image */
           background-repeat: no-repeat;
       }

       /* optional style */
       .myButton {
           margin: 10px;
           width: 80px;
           height: 40px;
       }
   </ui:style>
   <g:HTMLPanel>
       <g:FocusPanel ui:field="profileImagePanel">
           <g:AbsolutePanel addStyleNames="{style.myPanel}">
               <g:HorizontalPanel ui:field="imageEditButtons">
                   <g:Button ui:field="clearImage" text="clear image" addStyleNames="{style.myButton}" />
                   <g:Button ui:field="changeImage" text="second button" addStyleNames="{style.myButton}" />
               </g:HorizontalPanel>
           </g:AbsolutePanel>
       </g:FocusPanel>
   </g:HTMLPanel>

将我的标签 g:Button 替换为您的 w:MultiUseButton 并添加所需的其他样式。您可以在 css 文件中引入的样式。结果，你应该得到你想要的。在这种情况下，不需要 AbsolutePanel。简单的 FlowPanel 也适用。