实现 css - 更改 toast 对话框的位置答案

【问题标题】：Materialize css - change position of toast dialog实现 css - 更改 toast 对话框的位置
【发布时间】：2015-11-06 11:42:38
【问题描述】：

我正在使用 Materialize css (www.materializecss.com)。想要改变 toast 对话框的位置。在较小的屏幕中，它位于正确的位置。对于宽屏和盒子布局，它会出现在我布局的右上角。 (http://materializecss.com/dialogs.html)

当 toast 被触发时，它会在正文中附加“<div id="toast-container"></div>”。我不想将它附加到正文中。我想要它在特定的 div 中。

【问题讨论】：

您能否提供一些代码，以便我们为您提供帮助...
检查materializecss.com/dialogs.html，你会找到演示。我想在特定位置举个例子
寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
我对这个非常清楚问题的答案很感兴趣。
ManishRane 如果@NiZa 的回答有帮助，请将其标记为已接受。 :)

标签： javascript css html materialize

【解决方案1】：

toast 对话框的位置可以通过将#toast-container 的默认值设置为auto 和!important 来更改。

例如，如果您希望在桌面屏幕上与默认位置相反，请将其更改为：

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 10%;
  left:7%;  
}

使用!important 是是必要的，否则materialize.css 将覆盖它
使用position:absolute; 或position:fixed; 是不是必要的

0.97.6版演示

Materialize.toast('I am a toast!', 4000);

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 10%;
  left:7%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>

【讨论】：

如果你想将 toast 移动到右上角，你确实需要使用 bottom: auto !important; 和 left: auto !important; 否则它们将被 materialize.css 中的默认值覆盖。跨度>
你是对的。我没有意识到演示是在较小的屏幕上显示的。感谢您的反馈意见。改变了答案。

【解决方案2】：

要将 toast 的位置设置在文档的中心，您可以添加以下样式：

#toast-container {
    min-width: 10%;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(50%);
}

【讨论】：

【解决方案3】：

如果要改变对话框的位置，可以直接用css来设置样式。

#toast-container {
    position: fixed !important;
    bottom: 0px !important;
    left: 0px !important;
}

'!important' 可能是不必要的。

【讨论】：

不需要指定position: fixed，因为它已经在materializecss 样式中为#toast-container 定义了。但是您必须默认替换top 属性，以避免它与bottom 组合应用。删除它：top: inherit !important;

【解决方案4】：

只要把它扔到一个相对的 div 中，如果它已经存在，看起来 lib 不会创建将它添加到 body 端。

<div style="position: relative">
....
<div id="toast-container"></div>
</div>

【讨论】：

如果不将#toast-container 设置为position: absolute，这将不起作用，因为position: fixed 将忽略父定位。