为什么绝对定位的页脚消失了
[英]why a footer positioned absolute disappears
问题描述
I am currently learning HTML & CSS and wrapping my head around positioning ie fixed, relative and absolute.
我目前正在学习 HTML 和 CSS 并围绕定位，即固定、相对和绝对。 I understand the concepts of each pretty well , at least I thought I did until my footer tag completely disappeared within itself when I set it's position to absolute.我非常了解每个概念，至少我认为我做到了，直到当我将它的位置设置为绝对时，我的页脚标签完全消失了。 I know your asking what does disappeared within itself mean ?我知道你问的是什么意思？ It means I had to adjust the left position value from 1024 to 850 just to be able to see the footer again.这意味着我必须将左位置值从 1024 调整到 850 才能再次看到页脚。 Which makes me ask why the did the position value jump so high after setting the footer the absolute?Essentially that's the question I am asking.这让我问为什么在将页脚设置为绝对值后位置值跳得这么高？基本上这就是我要问的问题。 I hope I explained well enough.我希望我解释得足够好。 I tried to include a picture but Stackoverflow wouldn't let me since this my first post.我试图包含一张图片，但自从这是我的第一篇文章以来，Stackoverflow 不允许我这样做。 Also i had three other 3 other divs on the page with the footer, div and header elements positions are set to relative.......code below.此外，我在页面上还有另外三个 div，页脚、div 和页眉元素位置设置为相对......代码如下。
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>
1 个解决方案
解决方案1
-1 2017-12-28 04:35:27
position:absolute; will place an element relative to its ancestor element.将相对于其祖先元素放置一个元素。 So if you positioned your footer as absolute it will start from where the body of the page starts.因此，如果您将页脚定位为绝对页脚，它将从页面正文开始的位置开始。
footer{
position:absolute;
bottom:0;
}
Adding bottom:0;添加bottom:0; will place your element at the very bottom of the body.将您的元素放在身体的最底部。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.