У меня проблемы с размещением элементов на моем сайте с сеткой CSS. - PullRequest
Новая
       7

У меня проблемы с размещением элементов на моем сайте с сеткой CSS.

0 голосов
/ 03 апреля 2020

Я создаю сайт c. Я позиционировал элементы с помощью Grid layout. Я использую вложенные сетки для упрощения моих стилевых свойств. 

.main_body{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 100px auto auto;
}

.head{
    grid-row-start: 1;
    grid-row-end: 2; 
}
.body{
    grid-row-start: 2;
    grid-row-end: 3;
}
.foot{
    grid-row-start: 3;
    grid-row-end: 4;
}
.body{
    position: relative;
    grid-template-columns: 225px auto;
    grid-template-rows: auto auto;
    display: grid;
}
.info{
    padding: 10px;
    border: 1.5px solid #8142ff;
    grid-column: 2/3;
    grid-row: 1/2;
    z-index: 1;
}
.prdct_lst{
    grid-column: 1/2;
    grid-row: 1/2;
}
.main_content{
    border: 1.5px solid #8142ff;
    padding: 0px;
    grid-column:1/3;
    grid-row:1/3;
}
<body>
    <div class="body">
    <ul class="prdct_lst">
        <li class="prdct"><a href="products\led_wall.html">LED Video Wall</a></li>
        <li class="prdct"><a href="products\led_frame.html">LED Photo Frame</a></li>
        <li class="prdct"><a href="products\crane.html">Video Crane</a></li>
        <li class="prdct">
            <a href="https://www.apnaphotoledwall.com/" target="_blank">
                Photo LED Wall
            </a>
        </li>
        <li class="prdct"><a href="products\video_eqp.html">Video Equipment</a></li>
        <li class="prdct"><a href="products\sub.html">Sublimation</a></li>
    </ul>
    <div class="main_content">
        <img src="images/bg_img.png">
        <div class="info">
            <h1>We'd love to hear from you</h1>
            Wether you have a question about features, trials, pricing, need a demo, or anything else, our team is ready to answer all your questions.
        </div>
    </div>
    </div>
</body>

This is how it is showing up Я хочу, чтобы текстовая часть отображалась на изображении.

Я попытался использовать отдельную сетку и свойство z-index но не мог заставить его работать. Любая помощь будет очень благодарна

...