Positionnement CSS et analyse de scénarios d'application

Nous savons tous que lors du développement de pages Web, nous pouvons parfois obtenir de bons résultats en utilisant de manière flexible l'attribut de positionnement CSS pour la mise en page. Dans cet article, nous avons résumé les points de connaissance de position et les endroits couramment utilisés, dans l'espoir d'aider les amis qui apprennent. css peut s'y référer.

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

Nous expliquons d’abord l’attribut de position en détail.

En CSS3, voici comment la position est décrite

Le résumé est le suivant :
static est la mise en page par défaut et topleft est défini. . Les propriétés n'auront aucun effet.
relative est une mise en page relative, définie en haut à gauche. . Sera relatif au contrôle dans le fichier.
Absolu est un positionnement absolu, défini en haut à gauche. . Cela dépendra de la page entière.
Fixed est positionné par rapport à la fenêtre du navigateur et les attributs haut/gauche définis sont relatifs à la position de la fenêtre du navigateur.

De plus, après avoir testé mon code :
1. . La position de l’une des propriétés de mise en page par défaut, absolues et fixes changera par rapport à la position du contrôle parent.
2.Positionnement relatif relatif, s'il y a un contrôle parent, il est relatif au contrôle parent le plus proche, pas au contrôle parent le plus proche sur le même calque. Suivi par les contrôles frères.
3.static n’a aucun effet sur les autres couches de revêtement.

Ensuite, prouvons la conclusion ci-dessus à travers le code :

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

Ici, vous pouvez voir que p avec l'identifiant un est la disposition relative au contrôle parent.

Cas 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 :

　

                                                                                                                                 🎜>


On peut voir à partir d'ici que lorsque le positionnement relatif est relatif au contrôle parent le plus proche, il ne s'agit pas du même contrôle parent de couche.

Cas 3 : S'il n'y a pas de parent p:

HTML




CSS

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

                  

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

À travers cette situation, on peut voir que s'il n'y a pas de contrôle parental, le positionnement relatif est relatif au contrôle frère. .

Description du z-index en CSS3

Applications courantes en développement de position

1. Fenêtres flottantes des deux côtés de la page web (lecteur, bouton supérieur, publicité flottante, bouton de fonction, etc.)
2. La barre de navigation flotte vers le haut.
3. Masquer p pour réaliser la fonction pop-up (contrôler la position et l'apparence de p en définissant le positionnement et l'index z de p)



Parmi eux, 1 et 3 sont relativement simples. Cela peut être réalisé en définissant position=fixed, top left et z-index. Aucune explication n'est donnée ici

Cas 2 :

Jugez la position de la barre de défilement. en appelant la fonction js, en dépassant la navigation Lorsque la hauteur de la barre à partir du haut est définie, définissez la position à fixer pour fixer la position de la barre de navigation. Sinon, la position est statique et le marquage et les autres attributs restent inchangés.

JS :


　


HTML :

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

Définissez le CSS approprié pour contrôler le style souhaité.

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

Recommandations associées :


À propos de l'attribut position en CSS

Comparaison de l'attribut CSS float et position:absolute

css : L'utilisation et la définition de list-style-position

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!