#html #css
#HTML #css
Вопрос:
Я хотел бы добиться следующего: у меня есть макет сетки css, и я хочу, чтобы заставка перекрывала панель навигации, а панель навигации находилась на переднем плане. Я могу вывести изображение наверх, используя grid-row-start: 1; на нем, но затем панель навигации, похоже, переходит к следующему элементу или чему-то еще.
#container{
display: grid;
grid-template-columns: 100%;
grid-template-rows: 50px 600px 1200px 50px;
}
#headerImage{
height: auto;
width: 100%;
}
#header{
grid-column: 1;
grid-row: 1;
}
nav ul {
list-style: none;
background-color: rgba(0, 0, 0, 0.26);
text-align: center;
padding: 0;
margin: 0;
grid-column: 1;
grid-row: 1;
}
nav li {
display: inline-block;
color: white;
width: 150px;
font-family: sans-serif;
font-size: 1.2em;
line-height: 50px;
height: 50px;
} <div id="container">
<div id="nav">
<ul>
<li>text1</li>
<li><img id="splashimage" src="images/splashimage.png" /></li>
<li>text2</li>
</ul>
</div >
<div id="header"><img id="headerImage" src="images/header.jpg" /></div>
<div id="content">
</div>
<div id="footer">
</div>
</div> Как мне этого добиться? Спасибо.
Ответ №1:
Вы можете использовать свойство css z-index, чтобы изображение перекрывало панель навигации. Вам нужно объявить один класс в теге изображения, пусть это будет splashimage,
.splashimage {
z-index: 100
}
Ответ №2:
вы можете использовать z-index, а также сделать это с помощью свойства position . Я сделал очень маленький пример на w3school. пожалуйста, посмотрите прилагаемые скриншоты 