I'm experimenting with CSS in a codecademy project, and I noticed that when I set a footer to have fixed positioning (with no left/right/top/bottom properties set), it just disappears. I would expect it to just shrink the way it does with absolute positioning, but it doesn't. Without fixed positioning the footer is there where it should be, but with it, it's gone. Why is it behaving this way?
The footer in question is selected in the CSS in the footer ruleset.
Here's the codepen: https://codepen.io/megas4ever/pen/ExwEEzv
And here's the full code:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
display: inline-block;
width: 80px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
width: 200px;
height: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
@media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div >
<div >
<h1>We are Broadway</h1>
<a href="#" > Get Started </a>
</div>
</div>
</main>
<section >
<div >
<div >
<img src="https://content.codecademy.com/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
<a href="#"> Learn More</a><br>
</div>
<div >
<img src="https://content.codecademy.com/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
<a href="#"> Learn More</a><br>
</div>
<div >
<img src="https://content.codecademy.com/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
<a href="#"> Learn More</a><br>
</div>
</div>
</section>
<footer>
<div >
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>
CodePudding user response：
Well, you've kind of hinted at the problem yourself already.
I noticed that when I set a footer to have fixed positioning (with no left/right/top/bottom properties set), it just disappears.
Just because you haven't provided left/right/top/bottom properties, doesn't mean they are not in effect.
In this case, the default values (which most likely reflect the effective top/left values with the default position: static) are just not ideal.
Since the footer takes up the full width of the screen, the left value likely defaults to 0; this is fine and that's not the source of the problem.
But, since the footer is located on the bottom of your site, its auto/default top value max well be like 2000px -> you have to scroll down to even be able to see it.
Once you enabled fixed positioning, and didn't provide any top value yourself, that number would still be top: 2000px. And since it's now fixed in place, scrolling has no effect on it, which means its permanently located outside of your viewport. If your browser window was to be >2000px high, you would be able to see it, just hovering along by itself way below the rest of the site.
CodePudding user response：
As Raxi has pointed out in the answer the rule of thumb is position:absolute affixes it self to parent element axis.
BUT
position:fixed affixes it self to the view port it does not care about anything else in between.
So when you adding position:fixed its goes to viewport which can be any thing based on your device or what ever as Raxi pointed out.
SIMPLyPUT its there but not in your field of vision becuase it made up its own mind where to place it self in empty vast space of view port.
NOW if we give it some coordinates it will behave as expected that is bootom:0; example below. but there is another problem hope you can pick it up.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
display: inline-block;
width: 80px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
bottom:0;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
width: 200px;
height: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
@media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div >
<div >
<h1>We are Broadway</h1>
<a href="#" > Get Started </a>
</div>
</div>
</main>
<section >
<div >
<div >
<img src="https://content.codecademy.com/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
<a href="#"> Learn More</a><br>
</div>
<div >
<img src="https://content.codecademy.com/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
<a href="#"> Learn More</a><br>
</div>
<div >
<img src="https://content.codecademy.com/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
<a href="#"> Learn More</a><br>
</div>
</div>
</section>
<footer>
<div >
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>PROBLEM when we added position:fixed and gave coord bottom:0 footer did find its elf in field view of view port but it has resized the width as it was display:inline element not as an display:block element.
its quirk mode sort of problem we have work arounds e.g. giving left:0; right:0; bottom:0; would sort of display as if block element, better option would be to give it width:100% 100% based on view port size etc which works great if there is no desired margin around body tag which 99% of websites specifically dont just as in your case example below;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
display: inline-block;
width: 80px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
bottom:0;
width:100%;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
width: 200px;
height: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
@media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div >
<div >
<h1>We are Broadway</h1>
<a href="#" > Get Started </a>
</div>
</div>
</main>
<section >
<div >
<div >
<img src="https://content.codecademy.com/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
<a href="#"> Learn More</a><br>
</div>
<div >
<img src="https://content.codecademy.com/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
<a href="#"> Learn More</a><br>
</div>
<div >
<img src="https://content.codecademy.com/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
<a href="#"> Learn More</a><br>
</div>
</div>
</section>
<footer>
<div >
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>