Html 浮动收割台赢得'；t悬停在图像上方

因此，我将标题设置为使用滚动淡入淡出，但使用悬停显示。它适用于所有的图片，但猫图片在公文包部分。我调整了z索引，并尝试了所有方法。标题不会出现在h4或问题文件下的任何内容上，问题文件是portfolio.html。标题显示在其他图片上方。这让我快发疯了。

/*Eastablish车身参数*/
身体{
背景图片：url（“../images/circlesbg.png”）；
背景色：#D7CFC3；
颜色：#777777；
保证金：0px自动；
字体系列：“Arial”，“Helvetica Neue”，Helvetica，无衬线；
}
/*创建标题块*/
h1{
背景色：#4AAAA5；
显示：内联块；
填充：25px 20px 0px 20px；
高度：55px；
保证金：0px自动；
字体系列：“乔治亚”，泰晤士报，“泰晤士报新罗马”，衬线；
颜色：#FFFFFF；
字体大小：36px；
}
h1，
h2，
h3{
字体大小：粗体；
}
部分{
背景色：#ffffff；
}
/*在顶部建立标题*/
标题{
背景色：#FFFFFF；
边框底部：实心2px#CCCC；
保证金：0px自动；
宽度：100%；
高度：80px；
顶部：0px；
位置：固定；
z指数：99；
}
/*在卷轴上建立属性*/
body.scrolled#主菜单{
不透明度：0.2；
转变：不透明度；
z指数：98；
}
body.scrolled#主菜单：悬停{
不透明度：1.0；
转变：不透明度；
z指数：97；
}
/*确保标题和内容对齐*/
.横幅{
宽度：960px；
保证金：0px自动；
高度：60px；
位置：相对位置；
}
/*已建立导航链接参数*/
.连接盒{
填充：30px 0px 0px 20px；
高度：55px；
右：0px；
显示：内联；
位置：绝对位置；
}
/*建立主要内容参数（容器和连接块）*/
.内容{
宽度：960px；
保证金：0px自动；
}
/*在每个页面上建立唯一的主块*/
.集装箱{
宽度：590px；
边框：实心2px#dddddd；
浮动：左；
利润率：115px 0px 200px 0px；
填充：30px；
}
/*链接属性，包括悬停*/
a{
颜色：#777777；
文字装饰：无；
字体系列：“Arial”，“Helvetica Neue”，Helvetica，无衬线；
字间距：10px；
}
a:悬停{
颜色：#4AAAA5；
}
/*为容器和连接框建立标题字体*/
氢{
颜色：#4AAAA5；
字体系列：“乔治亚”，泰晤士报，“泰晤士报新罗马”，衬线；
边框底部：实心3px#dddddd；
垫底：20px；
边缘底部：10px；
字体大小：32px；
}
h3{
颜色：#4AAAA5；
字体系列：“乔治亚”，泰晤士报，“泰晤士报新罗马”，衬线；
边框底部：实心1px#dddddd；
垫底：20px；
边缘底部：10px；
字体大小：24px；
}
/*调整“关于我”部分的行高和段落*/
p{
线高：2.5；
字体系列：“Arial”，“Helvetica Neue”，Helvetica，无衬线；
边际上限：0px；
颜色：#777777；
}
/*我的照片在索引文件上*/
#脸{
浮动：左；
显示：内联；
边缘顶部：10px；
右边距：15px；
宽度：250px；
}
/*带有图标的连接框参数*/
.连接{
宽度：210px；
边框：实心2px#dddddd；
浮动：对；
边缘顶部：115px；
填充：30px；
}
/*通过悬停功能建立图标美学和行为*/
.图标{
显示：内联块；
保证金：0px 5px 30px 0px；
宽度：60px；
高度：60px；
}
.图标：悬停{
盒影：4px4p2p4aaa5；
}
/*使用悬停功能建立的cat图片和参数*/
.猫{
显示：内联块；
保证金：10px40px40px；
宽度：230px；
}
.猫：悬停{
盒影：4px4p2p4aaa5；
}
.image{
位置：相对位置；
显示：内联块；
}
/*为cat图像上的横幅建立参数*/
h4{
位置：绝对位置；
宽度：230px；
背景色：#4AAAA5；
颜色：#FFFFFF；
字体系列：“乔治亚”，泰晤士报，“泰晤士报新罗马”，衬线；
文本对齐：居中；
填充：10px 0px 10px 0px；
保证金：自动；
左：0px；
底部：50px；
}
/*建立粘性页脚*/
页脚{
背景色：#666666；
不透明度：0.85；
文本对齐：居中；
边框顶部：实心6px#4AAAA5；
位置：固定；
宽度：100%；
底部：0px；
填充顶部：30px；
填充底部：30px；
颜色：#BFBEBC；
字体大小：10px；
字体系列：“Arial”，“Helvetica Neue”，Helvetica，无衬线；
}
.clearfix:：之后{
内容：“；
显示：块；
明确：两者皆有；
}
/*为联系人/消息表单建立输入属性*/
输入[类型=文本]，选择，文本区域{
宽度：100%；
填充：12px；
边框：2个实心#DDDDDD；
边界半径：4px；
框大小：边框框；
边缘底部：16px；
调整大小：垂直
}
输入[类型=提交]{
背景色：#4AAAA5；
颜色：#FFFFFF；
填充：12px 20px；
边界：无；
光标：指针；
}
/*使“提交”按钮在鼠标悬停时更改颜色*/
输入[类型=提交]：悬停{
背景色：#666666；
}
：-webkit输入占位符{/*webkit浏览器*/
颜色：#666666；
不透明度：0.5！重要；
}
标签{
颜色：#8F7E7F；
}

文件夹
约翰·本德费尔特
文件夹


建立网站
角色扮演游戏
益智问答游戏
石头剪子布
美国自由
与我联系


©2017年版权所有John Bendfeldt
window.addEventListener（'scroll'，函数（）{
document.body.classList[
window.scrollY>20？'add'：'remove'
]（‘滚动’）；
});

尝试添加一个

位置：绝对在
body.scrolled#主菜单中
选择器。它将如下所示：

body.scrolled #main-menu {
    opacity: 0.2;
    transition: opacity .2s;
    z-index: 98;
    position: absolute;
}

非常感谢。它还不能让我接受答案。你知道为什么会这样吗？别担心，你可以稍后接受答案：）。值小于1的“不透明度”属性将导致导航栏位于不透明度为1的标记下方。使用绝对位置时，导航栏将升高到z索引较低的标签上。