Warum wird der Abschnitt mit der Position fest auf den anderen Abschnitt verschoben?

Hinweis: Klicken Sie beim Testen auf die ganze Seite.Warum wird der Abschnitt mit der Position fest auf den anderen Abschnitt verschoben?

Wie Sie anhand des Snippets sehen können, wird der Abschnitt mit der Klasse "common" auf eine feste Position gesetzt, scheint aber relativ zu dem anderen Abschnitt zu sein. Wie kann ich es beheben, so dass der allgemeine Abschnitt relativ zum Browser festgelegt ist?

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; 
}

Quelle

2016-07-15 Pareod

können Sie eine jfiddle dafür erstellen? – Giri

Wie mache ich das? – Pareod

erstellen Sie eine in https://jsfiddle.net/ und speichern und veröffentlichen Sie hier einen Link. – Giri

Das erste, was ich bemerkte, ist, dass das fixierte Element einen Margin-Kollaps hat. Google, wie Sie das Eingrenzen von Randbereichen beheben können. Ich fügte hinzu:

padding-top: 1px;

an den Körper.

Weiter fügte ich hinzu:

height: 2000px an den Körper, damit der Körper bewegen kann, und Sie können die position:fixed im Spiel

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

Quelle

2016-07-15 05:02:54 Giri

Ich hatte während der Suche nach einer Antwort einen marginalen Kollaps gesehen, aber es gab so viele verschiedene Situationen, dass ich keine Lösung für mein Problem finden konnte. Ich bin mir immer noch nicht sicher, warum das Hinzufügen von Padding das Problem behebt. Da der allgemeine Abschnitt keinen Rand festgelegt hat und sich auf einer anderen Ebene befindet als der andere Abschnitt, sollte er sich nicht trotzdem oben auf der Seite befinden? – Pareod

Deshalb benutze ich Bootstrap oder Normalisierung css, dass diese Situationen bereits von großen Entwicklern angegangen wurden. Ich nenne diese Entwickler als Legenden. – Giri

/*Common pages */ 
 
.common { 
 
    z-index: 1; 
 
    margin-top: 10px; 
 
    position: relative; 
 
    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: 320px; 
 
} 
 

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

<?php session_start(); ?> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
    <title>Log in</title> 
 
    </head> 
 

 
    <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> 
 
</html>

Quelle

2016-07-15 04:15:01

Was müssen Sie noch tun? –

Dies nutzt jedoch nicht die festen Funktionen. Ich weiß, wie man relativ macht. – Pareod

Ich sehe bin Erraten Sie ein Layout wollen, die etwas YouTubes Layout darstellt (mit einem festen Header und einer Seitenleiste).

Die Elemente, die eine feste Positionierung haben, werden von der Seite "hochgehoben", so dass der Rest der Seite gerendert wird, als ob diese Elemente gar nicht vorhanden wären. In diesem Sinne müssen Sie anpassen, das Layout ein wenig:

CSS

* { 
    padding: 0; 
    margin: 0; 
} 

header { 
    background-color: #222; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 150px; 
} 

.container { 
    margin-top: 150px; /*Same as header height*/ 
    margin-left: 150px; /*Same as menu width*/ 
} 

.menu { 
    background-color: #333; 
    position: fixed; 
    left: 0; 
    width: 150px; 
} 

.content { 
    padding: 10px; 
}

HTML

<header></header> 

<section class="container"> 
    <aside class="menu"> 
    <!-- Menu here --> 
    </aside> 

    <div class="content"> 
    <!-- Content here --> 
    </div> 
</section>

Here is a demo

Der Inhalt muss einen Rand (oder Padding) haben, damit er nicht unter den festen Elementen verborgen bleibt.

Quelle

2016-07-15 05:19:13 vkopio

Es sieht so aus, als ob du 'top: 0;' aus der Kopfzeile entfernst, dann bekommst du das gleiche Problem, das ich hatte. Warum das? – Pareod

[Hier ist ein Einblick] (http://stackoverflow.com/questions/24560958/how-does-margin-of-separate-element- affect-position-of-fixed-element). – vkopio

Warum wird der Abschnitt mit der Position fest auf den anderen Abschnitt verschoben?

Antwort

Verwandte Themen