Search code examples
htmlcss

Overlapping header on image

I am trying to overlaap the header and the image i cant get it to working

I tried using everything in 1 div and use position relative to make them overlaap but it didnt work and i tried also use z index but still it aint working

here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="home.css">
</head>
<body>
    <div class="header">
        <h1>Pixelcyber</h1>
        <nav>
            <a href="home.html" style="text-decoration:none">Home</a>
            <a href="portfolio.html" style="text-decoration:none">Portfolio</a>
            <a href="projects.html" style="text-decoration:none">Projects</a>
            <a href="contacts.html" style="text-decoration:none">Contacts</a>
        </nav>
    </div>
    <h1>Coder</h1>
    <p>4 years experience</p>
    <div class="wp">
        <img src="luffy.png" alt="luffy">
    </div>
</body>
</html>
Solution

  • you can do it with

    position: absolute;
top: 0;
left: 0;

    as in here https://stackblitz.com/edit/stackblitz-starters-rtpd4i?file=index.html