Pareod Pareod - 4 months ago 9
CSS Question

Why is the section with position set to fixed moving with the other section?

Note: Click full page when testing.

As you can see by the snippet, the section with the class "common" is set to a fixed position, but it seems to be relative to the other section. How do I fix it so that the common section is fixed relative to the browser?

Jsfiddle:

https://jsfiddle.net/my1c76vb/?utm_source=website&utm_medium=embed&utm_campaign=my1c76vb

Code:

HTML5:

<?php session_start(); ?>
<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Log in</title>
<body>
<section class="common">
<header>
<img src="resources/header.png" alt="Sqeaking Duck"/>
</header>

<aside class="menu">
<h3>Guest</h3>
<hr>
<nav>
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="login.php">Log in</a></li>
<li><a href="register.php">Register</a></li>
</ul>
</nav>
</aside>
</section>
<section class="login">
<form action="loginManager.php" method="post">
<fieldset>
<legend>Log in</legend>
User: <input type="text" name="username" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br>
Password: <input type="password" name="password" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>
</section>
</body>


CSS:

/*Common pages */
.common {
z-index: 1;
margin-top: 10px;
position: fixed;
width: 100%;
}

header {
width: 100%;
text-align: center;
background-color: CornflowerBlue;
}

.menu {
margin-top: 25px;
width: 80px;
background-color: black;
text-align: center;
}

.menu h3 {
color: white;
display: inline-block;
margin: 0;
padding-top: 5px;
}

.menu hr {border-color: white;}

.menu nav {
display: inline-block;
text-align: left;
width: 100%
}

.menu ul {
list-style: none;
padding: 0px 0px 0px 10px;
margin: 0;
}

.menu li {
padding-bottom: 10px;
}

.menu a {
text-decoration: none;
color: white;
}

/*Log in page*/
.login {
text-align: center;
z-index: 0;
margin-top: 300px;
}

/*General*/
body {
background-color: grey;
}

Answer

First thing I noticed is that the fixed element is having a margin-collapse. Google how to fix margin-collapsing. I added,

padding-top: 1px;

to the body.

Next I added,

height: 2000px to the body so the body can scroll and you can see the position:fixed in play

https://jsfiddle.net/my1c76vb/1/