使用CSS的下拉覆盖问题

Question

我无法解决以下问题：

1. 请注意下拉菜单'公司分支'和＆amp; “业务领域”在扩展后会隐藏在较低的部分后面。我希望将它带到顶端。

2. 在移动设备上查看时，标题徽标+文字不适合，徽标将不在视图范围内。解决问题的最佳方法是什么？

感谢。

Answer 1

对于第二期，请使用此

.main-header .hero-header .inner-hero-header {
position: relative;
width: 100%;
left: 0;
z-index: 10;
bottom: 0;
}

.inner-hero-header类位置是'绝对'所以，你将位置改为'relative'

Answer 2

1：隐藏选择字段的第一个问题可以通过z-index处理。或者切换DOM Order。但在这种情况下，在字段上包含简单的 z-index 可能更容易。

.form-group.location-form {
    position: relative;
    z-index: 1;
}

这样做的工作......好吧。 该字段大于其容器，并指定DOM-Tree 溢出隐藏的某处。确切地说，在 .hero-header 上。 我不知道为什么需要它。但我建议删除它。 （style.css文件：1560）

2：标题标识问题是由位置：绝对与底部组合引起的：0; 看起来这并不是真的需要。 将其更改为位置：相对; 可以解决问题。 这样，当标题中的文字需要更多高度而不重叠其他元素时，元素可以增长。

.main-header .hero-header .inner-hero-header {
    position: relative;
    width: 100%;
    z-index: 9;
}

顺便说一下：这里可以省略左下角的值。