调整窗口大小时,容器内具有相对定位的绝对元素不会移动

问题描述 投票:0回答:1

我对 html/css 很陌生,根据我的理解,在调整窗口大小等时,容器内具有相对位置的绝对定位元素应该随之移动,但它根本不起作用。

<!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

css flexbox positioning
1个回答
0
投票

只需删除

位置:绝对;

并移动

     <h1>West Coast Golf</h1>
容器外
© www.soinside.com 2019 - 2024. All rights reserved.