Как отобразить виджет (HorizontalPanel) поверх другого виджета (изображение) в GWT?

Question

Я пытаюсь получить две кнопки внутри горизонтальной панели, чтобы отображать поверх изображения. Не выше, как вы видите кнопки, а затем смотрите вниз по странице и смотрите изображение, но вы смотрите на изображение, и на нем есть кнопки.

Это код, который я до сих пор в моем 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, но он находится под изображением, а не сверху. Если я помещаю HorizontalPanel в AbsolutePanel перед изображением, то кнопки над изображением, и если я попытаюсь изменить верхний край, он сдвинет кнопки и изображение вниз.

У меня заканчиваются идеи. Любые предложения о способах выполнения этой работы будут высоко оценены.

Answer 1

Применить стиль background-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.