css - 在另一个面板上显示一个小部件

Question

我正在使用 GWT，我在尝试将一个 VerticalPanel 显示在另一个面板上时遇到问题。我的应用程序中有两个面板:一个作为菜单栏，另一个作为主要内容。 VerticalPanel 是菜单栏，当您将鼠标移到它上面时，它会打开并显示更多选项(小部件)。问题是这个新的小部件被菜单栏下方的面板隐藏了。我想显示整个小部件，即使它部分“侵入”另一个面板。我已尝试使用 CSS 设置 z-index 属性，但无法获取。

public class Example2 implements EntryPoint {

public void onModuleLoad()
{
    //Creating the layout which one will contain two simplePanels
    DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
    dockLayoutPanel.setStylePrimaryName("layout");

    //Creating the two Simplepanels
    SimplePanel menuPanel = new SimplePanel();
    menuPanel.setStylePrimaryName("menuPanel");
    SimplePanel mainContentPanel = new SimplePanel();
    mainContentPanel.setStylePrimaryName("mainContentPanel");

    //Adding panels to the DockLayoutPanel
    dockLayoutPanel.addNorth(menuPanel, 10);
    dockLayoutPanel.add(mainContentPanel);

    VerticalPanel vPanel = new VerticalPanel();
    //Creating some buttons
    Button a = new Button("Button");
    vPanel.add(a);
    Button b = new Button("MoreButton");
    vPanel.add(b);
    Button c = new Button("AnotherButton");
    vPanel.add(c);
    Button d = new Button("ButtonButton");
    vPanel.add(d);
    Button e = new Button("LastButton");
    vPanel.add(e);

    //Adding the buttons to the menuPanel(simplePanel)
    menuPanel.add(vPanel);

    RootLayoutPanel rp = RootLayoutPanel.get();
    rp.add(dockLayoutPanel);
}
}

和 .css

.layout{
    font-size:10px;
}

.menuPanel{
    background:#e8f8ff;
}

.mainContentPanel{
    background:#eee9e9;
}

通过这个例子，您可能会明白我的观点。我知道这是一个愚蠢的，但它显示了我的问题。添加到 vPanel 的按钮只要在 menuPanel 中占据空间就会显示，其余的都隐藏在 mainContentPanel 下。

Answer 1

它可以像更改将菜单面板和主面板添加到其父窗口小部件的顺序一样简单。先添加主面板，再添加菜单面板。显然，在没有看到您的代码的情况下很难确定。