无法将绝对 css 定位应用于我自己的复合按钮

Question

我遇到了一个奇怪的问题，虽然我有一个工作，但我仍然想了解为什么会发生这种情况。

这是我的合成类

    import com.google.gwt.event.dom.client.ClickEvent;
    import com.google.gwt.event.dom.client.ClickHandler;
    import com.google.gwt.event.dom.client.HasClickHandlers;
    import com.google.gwt.event.shared.HandlerRegistration;
    import com.google.gwt.user.client.ui.*;
    public class ExpandingOvalButton extends Composite implements HasClickHandlers
    {   
        private PushButton button;
        private Label label = new Label();
        private AbsolutePanel panel = new AbsolutePanel();
        public ExpandingOvalButton(String text)
        {       
            int width = 40;
            initWidget( panel );
            Image image = new Image( "icons/ovalBlueButton.png");
            label.setText(text);
            width = width + (text.length() * 8);
            String widthStr = width + "px";
            image.setWidth(widthStr);
            image.setHeight("50px");
            button = new PushButton( image );
            button.setWidth(widthStr);
            button.setHeight("50px");
            panel.setSize(widthStr, "50px");                
            panel.add(button, 0, 0);
            panel.add(label, 18, 14);
        }
        ...

当我将它与其他小部件一起添加到flex表时，它对我来说是完美的，然后我可以将css样式应用到flextable并将其定位。问题是，如果我想应用css定位到一个ExpandingOvalButton实例，它不坐在另一个面板里面，它不能正常工作。

private ExpandingOvalButton startBtn = new ExpandingOvalButton("Start");
startBtn .getElement().setId("myId");

#myId
{
    position: absolute;
    left: 30%;
    top: 120px;
}

这不会将自己定位在离左侧30%的位置。然而，如果我添加startBtn到面板，然后应用相同的CSS样式到面板，它将自己的位置从左边30%

panel.add(startBtn);
panel.getElement().setId("myId");

有没有人遇到过这个或者知道是什么原因导致的?

Answer 1

如果您查看AbsolutePanel的源代码，您会在构造函数中发现以下内容:

DOM.setStyleAttribute(getElement(), "position", "relative");

优先于css中声明的样式。您可以通过类似的操作强制它使用绝对定位:

DOM.setStyleAttribute(startBtn.getElement(), "position", "absolute");