Наложение изображений с использованием Z-индекса, но не видно элементов ниже - PullRequest
Новая
       29

Наложение изображений с использованием Z-индекса, но не видно элементов ниже

0 голосов
/ 01 мая 2018

Я пытаюсь выполнить следующее, где у меня есть текст на левой стороне страницы и рисунок на правой стороне. https://i.stack.imgur.com/K5jAy.png

Я использую Bootstrap 4, и пока все идет хорошо. Однако, пытаясь включить графику в сайт, я сталкиваюсь с двумя проблемами:

  1. Я всегда хочу, чтобы графика располагалась одинаково независимо от размера экрана, на котором отображается веб-сайт. В настоящее время я устанавливаю ширину графики на 75%. При предварительном просмотре на меньшем экране изображение даже не видно, потому что ширина очень мала по сравнению с шириной области просмотра. Я использую абсолютное позиционирование, но это, кажется, меняется в зависимости от размера экрана.

  2. При предварительном просмотре на большом мониторе изображение отображается поверх моего текста. Я не думал, что это будет проблемой. Я сохранил мою графику как png, чтобы обеспечить прозрачность, и я дал моей графике более высокий z-индекс, чем мои текстовые элементы. Тем не менее, графика выглядит как блок и покрывает мои текстовые элементы, как показано здесь. https://i.stack.imgur.com/wk5QX.png

Есть ли у вас какие-либо предложения о том, как решить любую проблему?

HTML: 

<section class="header">
<div class="container-fluid p-4">
    <img class="logo" width="52" height="57" src="img/BraydonCoyerLogoIcon.png" alt="Personal Logo">
    <img src="img/decoration1.png" alt="Colorful Decorations" class="decoration">
</div>
<div class="container mt-5">
    <div class="greeting">
        <div>
            <h1>Hi,</h1>
            <h1>Some <span class="highlight">Text</span></h1>
            <hr align="left"/>
        </div>

    </div>
</div>

CSS: 

* {
    background-color: #262628;
    color: #eaeaea;
    font-family: "Varela Round", Helvetica, Arial;
}

.greeting {
    margin-top: 10em;
}

.greeting h1 {
    font-size: 100px;
}

.highlight {
    color: #f99e46;
}

.slogan {
    font-size: 20px;
}
hr {
    background-color: white;
    width: 50%;
}

.decoration {
    width: 75%;
    position: absolute;
    z-index: initial;
    top: -150px;
    left: 520px;
}

1 Ответ

0 голосов
/ 02 мая 2018
  1. Попробуйте использовать процент для левой позиции: left: 50%
  2. Похоже, ваше декоративное изображение наследует background-color: #262628; от селектора подстановочных знаков
...