pozycjonowanie: div nad obrazkiem

Question

Witam
Chciałbym wy pozycjonować nad obrazkiem teks zamknięty w divie ale mi to nie wychodzi..

 <header>
        <div class="a">
            <h1>Lorem ipsum dolor sit amet</h1>
            <h2>Sequi veritatis nobis enim, culpa!</h2>
            <img src="img/szabo-viktor-1658348-unsplash.jpg">
        </div>

    </header>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

header {
    width: 100%;
    height: 100vh;
    position: relative;
    top: 0;
    left: 0;
}

header img {
    
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

div .a {
    color: firebrick;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

 

Jeśli się odniosę bezpośrednio do h1 czy h2 (tak jak to tyczy się "div .a") to owszem ustawi mi się wszystko dobrze. tylko z tym że ja chciałbym to zamknąć w divie i ustawić całą jego zawartość nad obrazem a nie pojedynczo.

Co do wczytywania się obrazu.. Nie wiem jak to zrobić inaczej dla tego tak to piszę ale chodzi w teorii o to by każda sekcja była na cały ekran i potem jedna na drugą się najeździła z innym tłem..

Mam nadzieję że zrozumiale wszystko wyjaśniłem.
Dziękuję bardzo serdecznie za wszelką pomoc jak i informację.
Pozdrawiam - P

Answer 1

div .a odnosi się do klasy 'a' wewnątrz 'div' a u Ciebie takiego zagnieżdżenia nie ma. W Twoim przypadku jest div, któremu nadałeś klasę a więc css powinien wyglądać tak (be spacji)

div.a{
...
}

Nie stosuj a dla nazwy klasy ponieważ jest to oznaczenie hiperłącza w html

Comments

Nie stosuj a dla nazwy klasy ponieważ jest to oznaczenie hiperłącza w html

to raz, a dwa, taka nazwa jest kompletnie nieczytelna i niezrozumiała... za miesiąc sam nie będziesz pamiętał co ona oznacza:)