Pareod Pareod - 1 year ago 37
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?




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

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

<aside class="menu">
<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>
<section class="login">
<form action="loginManager.php" method="post">
<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">
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>


/*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;

body {
background-color: grey;

Answer Source

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