Question

我有一个网站，用户可以在其中提交帖子，当他们这样做时，他们会收到警报消息（成功或警告）。我会在页面顶部显示警报消息，并使用class Quote: def __init__(self, car_make, car_model, car_type, engine_size, years_claim_free, starting_rate): self.car_make = car_make self.car_model = car_model ..... #you get the idea def engine_size_impact_on_quote(self): #Your Code here and return something def carType(self): #Evaluate car type def calculate_insurance(self): #calculate insurance return self.starting_rate #Create instance of the class johns_quote = Quote(car_make, car_model...........) johns_insurance = johns_quote.calculate_insurance() print(f"John's Car insurance is {johns_insurance}"即时消息，以使其在弹出时无法移动。一切都很好，并且一切正常，但是我的SIGN UP / OUT按钮显示在警报框中，而不是像整个导航一样显示在其后。

Here is it how Sign Up button is showing in front of alert message

我希望“注册/退出”按钮像其他导航元素一样显示在警报消息的后面。

注册按钮CSS：

position: absolute

Alertbox CSS

.navbar-brand, .navbar-inverse .navbar-nav > li > a {
color: #778489;
    text-shadow: 0 0px 0 rgba(0, 0, 0, 0.0);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: .05em;
    position: relative;
}

li.sign-up {
    background: transparent;
    border: none;
    font-weight: 400;
    border-radius: 0px;
    box-shadow: none;
    color: #ffffff;
    text-decoration: none;
    text-shadow: none;
    padding: 0px 8px;
    text-transform: uppercase;
}

注册HTML：

.alertMsg {
    font-size: 16px;
    line-height: 1.5em;
    display: flex;
    justify-content: center;
    width: 100%;
    transition: background 0.5s ease 0s;
    height: 55px;
    padding: 12px;
    position: absolute;
}
    .alertMsg i {
        font-size: 18px;
        margin-right: 10px;
        margin-bottom: 5px;
    }

我将非常感谢您的帮助，我已经解决了一段时间。祝你有美好的一天！

Answer 1

尝试使用z-index来指定HTML元素的堆栈顺序。如果一个z索引高于另一个z索引，则它将像一层一样堆叠在其上。让我知道是否可行。也可以随时发布有效的代码演示，以更好地进行故障排除。

.navbar-brand, .navbar-inverse .navbar-nav > li > a,
li.sign-up{
  z-index:3000; /* Number doesn't matter as long as it's higher than the .alertMsg z-index */
}

.alertMsg,
.alertMsg i{
  z-index:9999; /* Will be above anything below 9999 */
}

警报框显示不正确

1 个答案: