Содержимое тела HTML блокирует Nav

В настоящее время работаю над своей первой веб-страницей с HTML, CSS, Django и, возможно, Javascript в ближайшее время :)

Моя проблема в том, что я добавил несколько изображений в основной контент, чтобы проверить все (хотел добавить липкую навигацию), но основной контент каким-то образом перекрывает NAV, и я больше не могу нажимать на ссылки самой навигации.

Инспектор, где мы можем четко видеть перекрытие.

HTML:

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="{% static '/css/design.css' %}" />
    </head>
    <body>
        <!--NAVBAR-->
        <div class="navbar">
            <div class="navbar-title">
                <a href="{% url 'photos:home' %}">site-name</a>
            </div>
            <div class="navbar-links">
                <a href="{% url 'photos:home' %}">HOME</a>
                <a href="{% url 'photos:pictures' %}">PICTURES</a>
                <a href="{% url 'photos:album' %}">ALBUM</a>
            </div>
        </div>
        <div class="main-content">
          <img src="{% static '/img/1.jpg' %}">
          <img src="{% static '/img/1.jpg' %}">
          <img src="{% static '/img/1.jpg' %}">
          <img src="{% static '/img/1.jpg' %}">
          <img src="{% static '/img/1.jpg' %}">
        </div>
        {% block content %}{% endblock %}
    </body>
</html>

CSS:

body {
    background-color: #171717;
    font-family: Helvetica;
}

/*------------------NAVBAR------------------*/

.navbar, a {
    color: #FFF;
    text-decoration: none;
    font-size: large;
    margin: 10px;
    
}

.navbar-title {
    float: left;
    text-align: center;
    display: block;
    position: relative;
    padding-left: 50px;
    padding-top: 25px;
    font-style: italic;
}

.navbar-links {
    float: right;
    text-align: center;
    display: block;
    position: relative;
    padding-right: 50px;
    padding-top: 25px;
}

/*------------------MAIN-CONTENT----------------*/
.main-content {
    padding-top: 100px;
    position: relative;
}

в стиле main-content, если удалить the position: relative;

ваша проблема будет решена

Вернуться на верх