Can't apply absolute css positioning to my own composite button - css

Question

Here is a strange problem I am having, althougt I have a work around I would still like to understand why it is happening.
Here is my Composite class
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);
}
...
It works perfectly for me when I add it to a flex table along with other widget and then I can apply css styles to the flextable and position it fine. Problem is if I want to apply css positioning to a ExpandingOvalButton instance which does not sit inside of an other panel it does not work properly.
private ExpandingOvalButton startBtn = new ExpandingOvalButton("Start");
startBtn .getElement().setId("myId");
#myId
{
position: absolute;
left: 30%;
top: 120px;
}
This will NOT position itself 30% from the left side.
However if I add startBtn to a Panel and then apply the same CSS style to the Panel it WILL position itself 30% from the left.
panel.add(startBtn);
panel.getElement().setId("myId");
Anyone come across this before or know what might be causing it?

Answer 1

If you look at the source code for AbsolutePanel, you will find this in the constructor:
DOM.setStyleAttribute(getElement(), "position", "relative");
This has priority over the styles declared in your css. You can force it to use absolute positioning by doing something similar:
DOM.setStyleAttribute(startBtn.getElement(), "position", "absolute");