弹出面板，停靠在屏幕底部

Question

如何创建一个停靠在屏幕底部的弹出式面板...

我这样做的方法是将样式设置为：

底部：10px; position：absolute;

这将始终将面板设置为距离浏览器窗口底部10 px。

问题是gwt（或gwtp）坚持设置面板的右侧和顶部，从而覆盖了我的样式。如果我使用chrome的元素资源管理器并禁用右侧和顶部样式规则，我会得到正确的行为，所以一种方法是以某种方式禁用屏幕上面板位置的gwt设置......？

Answer 1

您可能需要使用!important来覆盖规则的优先级，以覆盖GWT对其设置的内容。

此外，top和right的默认值需要重置为默认值auto，而不是0。

试试这个：

.mySelector {
    bottom: 10px !important;
    position: absolute !important; 
    /* You could also try position: fixed !important; here
    if the element should be fixed by screen position
    rather than containing element position */
    right: auto !important;
    top: auto !important;
}

Answer 2

试试这个：

element-selector
{
    bottom: 10px; 
    position: absolute;
    top: 0;
    right: 0;
}

希望gwtp不会覆盖。