Z-индекс и бутстрап

Я пытаюсь выполнить z-индексирование различных «контейнеров» в начальной загрузке, чтобы они помещались поверх каждого из них.

Я классифицировал разные контейнеры и предоставил им разные позиции z-index. Ничего не произошло.

Вот код и CSS

Код

<!DOCTYPE html>
<html lang = "en">

<head>

    <title>Bootstrap test</title>

    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">

    <link href = "css/bootstrap.css" rel = "stylesheet" />
    <link rel = "stylesheet" href = "stylesheet.css" type = "text/css"></link>

    <script src = "js/bootstrap.min.js"></script>

</head>
<body>

    <div class = "container">
        <div class = "row justify-content-center">
            <div class = "col-sm-7 col">
                <h1>fælælflflflflf</h1>
                <p>
                    fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
                    gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
                </p>
            </div>
        </div>
    </div>

    <div class = "container behind">
        <div class = "row justify-content-center">
            <div class = "col-sm-7 col">
                <h1>fælælflflflflf</h1>
                <p>
                    fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
                    gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
                </p>
            </div>
        </div>
    </div>

</body>
</html>

CSS:

body {
    font-family: trebuchet ms;
    color:#666666; }

.container {
    z-index: 1;
}

.col {
    margin:20px;
    padding-bottom:20px;
    background-color:white;
    box-shadow:20px 20px 10px #0033cc;
}

.behind {
    padding-bottom:40px;
    z-index: 2;
}

Примечание: я добавил немного отступов, чтобы контейнеры были расположены друг на друге.

Спасибо за ответ

z-index не работает со статическими элементами позиции.

— 13.06.2018 15:28

z-index работает только с позиционированными элементами

— 13.06.2018 15:28

Спасибо за ответ :-) Я читал сейчас о позиционировании.

— 14.06.2018 12:34

html css twitter-bootstrap

13.06.2018 15:25

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 147

Другие вопросы по теме

SAPUI5 - входная граница / рамка

JQuery FullCalendar - управление z-индексом div в eventDragStart

Почему мое фоновое изображение исчезает / мерцает (начальная загрузка)?

Сделайте все столбцы одинаковой высоты, если у одного есть изображение с шириной 100%

Удаление значка сломанного изображения

Контейнер для слайд-шоу одинаковой высоты

Z-index не работает с относительными родительскими элементами и элементами после / до

Странная логика медиа-запросов CSS

Переместить элемент вверх только с помощью CSS

Создайте подменю в раскрывающемся списке подменю с помощью CSS

Z-индекс и бутстрап

Другие вопросы по теме

Похожие вопросы