问题描述
对于文本，当我向下滚动时，文本位于粘性导航栏下方。 
但是对于图像，当我向下滚动时，图像位于粘性导航栏的前面。
我尝试在互联网上查找内容，但在amp-html中找不到该内容。
这是我从互联网上获得的代码
<!doctype html>
<html amp>
<head>
<Meta charset="utf-8">
<title>TEST STICKY NAVBAR</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="http://www.indonesiangems.com">
<Meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body {
margin: 0;
font-family: Arial,Helvetica,sans-serif;
background-color: #f2f2f2;
font-size: 17px;
}
a {text-decoration: none;}
.container{
max-width: 800px;
margin: auto;
}
p,h3{
margin:auto;
padding : 10px;
text-align: justify;
}
.center {
text-align: center;
font-style: italic;
}
.footer {
background-color: black;
text-align: center;
margin: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: Nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 14px;
}
div.scrollmenu a:hover {
background-color: #777;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="sticky">
<amp-img src="https://dummyimage.com/1200x400/000/fff"
width="1200" height="400" layout="responsive"></amp-img>
<div align="center">
<div class="scrollmenu">
<a href="#">bla bla bla</a>
<a href="#">blublublublu</a>
<a href="#">belbelbelbe</a>
<a href="#">blobloblboblo</a>
<a href="#">blibliblibli</a>
</div>
</div>
</div>
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus imperdiet,nulla et dictum interdum,nisi lorem egestas odio,vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,ultrices nec congue eget,auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,facilisis sed ornare eu,lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,sed ullamcorper ipsum dignissim ac. In at libero sed nunc </p>
<div class="center">
<amp-img src="https://dummyimage.com/320x260/22d91c/fff"
width="320" height="260" layout="responsive"></amp-img><br>
Variety of Indonesian gemstones
</div>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet,sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet,ultrices nec </p>
</div>
</body>
</html>
谢谢。 Lorem ipsum dolor坐下来，自私自利。菜豆nibh tempor门。 Cras ac leo purus。 Mauris quis diam velit。 Lorem ipsum dolor坐下来，自私自利。菜豆，空菜和间断菜
解决方法
只需在图像中添加z-index属性即可。
将此添加到您的CSS文件中。
.center amp-img
{
z-index: -1;
}
我不确定该图像具有标签的必要性，但是一个快速的解决方法是像下面那样将标签转换为常规标签。
<img src="https://dummyimage.com/320x260/22d91c/fff"
width="320" height="260" max-width="320"></img><br>