Question

我目前正在学习HTML＆amp; CSS和我的头围绕着定位，即固定，相对和绝对。我理解每个人的概念很好，至少我以为我做了直到我的页脚标记完全消失在我自己的位置到绝对时。我知道你问的内心消失了什么意思？这意味着我必须将左侧位置值从1024调整到850才能再次看到页脚。这让我问为什么在设置页脚绝对后位置值跳得这么高？基本上这就是我要问的问题。我希望我解释得很好。我试图包含一张图片，但Stackoverflow不会让我这么做，这是我的第一篇文章。另外我在页面上有另外三个其他3个div，页脚，div和header元素位置设置为相对.......代码如下。

main, header, footer{
    display: block;
}

.page-container{
    width: 95%;
    margin: 0 auto;
    background-color: #050111;
    position:relative;
    
}

header{

    width: 100%;
    height: 60px;
    margin: 0px auto;
    background-color: blue;
    text-align: center;
    position: relative;
}

h1{
    color: white;
    line-height: 50px;
    margin: auto;
}

main{

    width: 100%;
    height: 500px;
    margin: 10px auto;
    background-color: rgb(24, 223, 223);
    text-align: center;

}

footer{
    widows: 100%;;
    height: 120px;
    margin: 0 auto;
    background-color: blueviolet;
    text-align: center;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <title>Layout practice</title>
</head>
<body>
    <div class="page-container">
        <header>
            <h1>This is the header of the page</h1>

        </header>

        <main>
            <h1>Main Content</h1>

        </main>

        <footer>
           <h1>Footer</h1>

        </footer>

    
    </div>
    
</body>
</html>

Answer 1

position:absolute;将相对于其祖先元素放置一个元素。因此，如果您将页脚定位为绝对页面，它将从页面正文开始的位置开始。

footer{
    position:absolute;
    bottom:0;
}

添加bottom:0;会将元素放在正文的最底部。

为什么页脚定位绝对消失

1 个答案: