Issue
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 class="jumbotron">
<div class="container">
<h1>We are Broadway</h1>
<a href="#" class="btn-main"> Get Started </a>
</div>
</div>
</main>
<section class="supporting">
<div class="container">
<div class="col">
<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 class="col">
<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 class="col">
<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 class="container">
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>
Solution
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.
Answered By - Raxi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.