Martin G
Martin G

Reputation: 17

Absolute element that are inside container with relative positioning does not move when resizing window

Im new to html/css and from my understanding a absolutely positioned element thats inside of a container with position relative should move with it when resizing window etc, but it does not work at all.

<!DOCTYPE html>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medlemsida</title>
    <link rel="stylesheet" href="medlem.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>West Coast Golf</h1>
        </header>
        <img src="./westcoast.png" class="logo" alt="logo"> 
            <section>
                <div class="information"><h2><u>Personlig Information</u></h2>
                    <ul>
                        <li>Namn: Hasse Eriksson</li>
                        <li>Adress: Smetvägen 4 Lindköping</li>
                        <li>Telefonnummer: 0705243566</li>
                        <li>Betalsätt: Autogiro</li>
                    </ul>
                </div>
            </section>
            <section>
                <div class="medlemskap"><h2><u>Medlemskap</u></h2>
                    <img src="./platinum.png" class="platinum" alt="platinum">
                    <button class="button" type="button">Avsluta Medlemskap</button>
                </div>
            </section>
            <section>
            <div class="handikapp"><h2><u>Handikapp</u></h2>
                <img src="./nineteen.png" class="nineteen" alt="19">
            </div>
        </section>
    </div>
</body>
</html>

CSS

https://jsfiddle.net/g3f5s8zu

Upvotes: 0

Views: 52

Answers (1)

Sedra Traiboush
Sedra Traiboush

Reputation: 1

just remove

position:absolute;

and move

     <h1>West Coast Golf</h1>
outside of container

Upvotes: 0

Related Questions