CSS-Positionierung und Anwendungsszenarioanalyse

Wir alle wissen, dass wir bei der Entwicklung von Webseiten manchmal gute Ergebnisse erzielen können, indem wir das CSS-Positionsattribut flexibel für das Layout verwenden. In diesem Artikel haben wir die Positionswissenspunkte und häufig verwendeten Orte zusammengefasst und hoffen, Freunden, die lernen, zu helfen CSS kann darauf verweisen.

<script>ec(2);</script>

Zuerst erklären wir das Positionsattribut im Detail.

In CSS3 wird die Position so beschrieben

Die Zusammenfassung lautet wie folgt:
statisch ist das Standardlayout und oben links ist festgelegt. . Eigenschaften haben keine Auswirkung.
relativ ist ein relatives Layout, das oben links festgelegt wird. . Wird relativ zum Steuerelement in der Datei sein.
Absolut ist die absolute Positionierung, oben links eingestellt. . Hängt von der gesamten Seite ab.
Fest wird relativ zum Browserfenster positioniert, und die festgelegten Attribute oben/links beziehen sich auf die Position des Browserfensters.

Außerdem nach dem Testen meines Codes:
1. . Die Position einer der Standard-, absoluten und festen Layouteigenschaften ändert sich relativ zur Position des übergeordneten Steuerelements.
2.Relative relative Positionierung: Wenn ein übergeordnetes Steuerelement vorhanden ist, ist es relativ zum nächstgelegenen übergeordneten Steuerelement und nicht zum nächstgelegenen übergeordneten Steuerelement auf derselben Ebene. Gefolgt von Bruderkontrollen.
3.Statisch hat keinen Einfluss auf andere Deckschichten.

Dann beweisen wir die obige Schlussfolgerung durch Code:

Fall 1

HTML:

<p id="zero">
            <p id="one">one</p>
            <p id="two">two</p>
            <p id="tree">tree</p>
</p>

CSS:

　　　　　　  #zero{
                width:200px;
                height: 200px;
                margin: 100px 500px;
                background: black;
    
                z-index: 0;
            }
            #one{
                width: 100px;
                height: 100px;
                position: relative;
                top: 50px;
                left:20px;
                background: red;
                z-index: 1;
            }
            #two{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 190px;
                
                background: yellow;
                z-index: 2;
            }
            #tree{
                width: 100px;
                height: 100px;
                position: fixed;
                top: 250px;
                left: 600px;
                background: deepskyblue;
                z-index: 3;
            }

Hier können Sie sehen, dass p mit der ID eins das Layout relativ zum übergeordneten Steuerelement ist.

Fall 2:

CSS:

 

       
               #first{
               width: 200px;
                height: 200px;
                background: black;
                margin-top: 100px;
                z-index: 1;
            }
            #second{
                margin-top: 10px;
                margin-left:10px;
                width: 150px;
                height: 150px;
                background: yellow;
                z-index:2;
            }
            #thrid{
                width: 100px;
                height: 100px;
                position:relative;
                background: red;
                top: 30px;
                left: 30px;
                z-index: 1;
            }

HTML:

　

                                                                                                                     🎜>


Hier ist ersichtlich, dass die relative Positionierung relativ zum nächstgelegenen übergeordneten Steuerelement ist, nicht zum übergeordneten Steuerelement derselben Ebene.

Fall 3: Wenn es kein übergeordnetes p gibt:

HTML




CSS

<p id="out"></p>
<p id="out1"></p>

                  .

Beschreibung des Z-Index in CSS3

Gemeinsame Anwendungen in der Positionsentwicklung

1. Schwebende Fenster auf beiden Seiten der Webseite (Player, obere Schaltfläche, schwebende Werbung, Funktionstaste usw.)

 #out{
                margin-top: 50px;
                width: 200px;
                height: 200px;
                background: black;
                z-index: 1;
            }
            
            #out1{
                width: 200px;
                height: 200px;
                background: yellow;
                position: relative;
                z-index: 3;
                top:10px;
            }

2. Die Navigationsleiste schwebt nach oben.

3. Verstecken Sie p, um die Popup-Funktion zu realisieren (steuern Sie die Position und das Erscheinungsbild von p, indem Sie die Positionierung und den Z-Index von p festlegen)

Darunter 1 und 3 sind relativ einfach. Dies kann durch die Einstellung position=fixed, top left und z-index erreicht werden.

Fall 2:

Beurteilen Sie die Position der Bildlaufleiste Durch Aufrufen der js-Funktion wird die Navigationsleiste überschritten. Wenn die Höhe der Leiste von oben festgelegt ist, legen Sie die Position fest, um die Position der Navigationsleiste zu fixieren. Andernfalls ist die Position statisch und Maring und andere Attribute bleiben unverändert.

JS:


　


HTML:







Stellen Sie geeignetes CSS ein, um den gewünschten Stil zu steuern.

　var mt = 0;
        window.onload = function () {
            var myp = document.getElementById("myp");
            var mt = myp.offsetTop;
            window.onscroll = function () {
                var t = document.documentElement.scrollTop || document.body.scrollTop;
                if (t > mt) {
                    myp.style.position = "fixed";
                    myp.style.margin = "0";
                    myp.style.top = "0";
                }
                else {
                    myp.style.margin = "30px 0";
                    myp.style.position = "static";
                }
            }        
        }

Verwandte Empfehlungen:

Über das Positionsattribut in CSS

　<p class="nav auto myp"  id="myp" style="z-index:2;">
        <ul id="ulnav">
          <li><a href="#">首页</a></li>
          <li><a href="classes.html">班级设置</a></li>
          <li><a href="achievment.html" rel="nofollow" target="_blank">教学成果</a></li>
          <li><a href="techEnviroment.html"  target="_blank">教学环境</a></li>
          <li><a href="specialCourse.html"  target="_blank">特色课程</a></li>
          <li><a href="teacherTeam.html" target="_blank">教师团队</a></li>
          <li><a href="contact.html" target="_blank">联系方式</a></li>
          <li></li>
        </ul>  
      </p>

Vergleich des CSS-Float-Attributs und der Position:absolute



css: Die Verwendung und Definition von list-style-position

Das obige ist der detaillierte Inhalt vonCSS-Positionierung und Anwendungsszenarioanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!