Сделать контейнер немного выше нижнего колонтитула
У меня есть контейнер со всем содержимым страницы фиксированной ширины (то есть не 100%), а внизу есть нижний колонтитул width:100%.
Я хочу, чтобы эта часть контейнера находилась над нижним колонтитулом, и вот что у меня получилось:
https://jsfiddle.net/84weu9nz/
При этом, как вы можете заметить, содержимое нижнего колонтитула больше нельзя щелкнуть или выбрать из-за z-index. Я мог бы установить относительное положение контейнера, например https://jsfiddle.net/rLmuq2of/, но проблема этого решения в том, что я не могу сделать все содержимое страницы внутри элемента position:relative, некоторые всплывающие окна или некоторые функции внутри этого элемента могут иметь неожиданное поведение. , поэтому я не думаю, что это хорошая практика.
Любое решение? Спасибо.
Ответы 2
Одно из решений, которое я могу придумать, - это использовать правило css для событий указателя, если у вас нет кликабельного содержимого в основном элементе:
main {
pointer-events: none;
}
Если у вас есть интерактивные элементы внутри вашего основного элемента, вы должны расширить правила:
main {
pointer-events: none;
}
main * {
pointer-events: all;
}
Пример
main {
position: relative;
background-color: red;
width: 400px;
margin: 0 auto;
pointer-events: none;
}
main * {
pointer-events: all;
}
footer {
background-color: green;
padding-top: 20px;
margin-top: -20px;
}<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <a href = "#">clickable element</a> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</main>
<footer>
<li><a href = "#">#1</a></li>
<li><a href = "#">#2</a></li>
<li><a href = "#">#3</a></li>
</footer>Мне удалось сделать это, используя силу flex, но я не уверен, что это действительно лучшее решение.
Я изменил порядок столбцов/элементов, используя css flex-direction: column-reverse, затем снова поместил основной div, используя порядок, на первую позицию order: 1 (порядок по умолчанию равен 0).
.app {
display: flex;
flex-direction: column-reverse;
}
main {
background-color: red;
width: 400px;
margin: 0 auto;
order: 1;
}
footer {
background-color: green;
padding-top: 20px;
margin-top: -20px;
}<div class = "app">
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</main>
<footer>
<li><a href = "#">#1</a></li>
<li><a href = "#">#2</a></li>
<li><a href = "#">#3</a></li>
</footer>
</div>