Was sind CSS-Positionierungen?-Front-End-Fragen und Antworten-php.cn

Was sind CSS-Positionierungen?

藏色散人

Freigeben： 2023-01-05 16:07:49

Original

3307 Leute haben es durchsucht

CSS-Positionierung umfasst: 1. statisch, was statische Positionierung bedeutet; 2. relativ, was relative Positionierung bedeutet; 3. absolut, was absolute Positionierung bedeutet;

Was sind CSS-Positionierungen?

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer. Mit der CSS-Positionierungseigenschaft können Sie Elemente positionieren. CSS bietet Eigenschaften für die Positionierung, mit denen Sie Spaltenlayouts erstellen, einen Teil eines Layouts mit einem anderen überlappen und Aufgaben erledigen können, für die jahrelang oft die Verwendung mehrerer Tabellen erforderlich war.

Mehrere Möglichkeiten der CSS-Positionierung:

1. statisch (statische Positionierung):

Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (oben, unten, links, rechts oder Z-Index-Deklarationen werden ignoriert). Siehe den vorherigen Aufsatz.

2. Relativ (relative Positionierung):

Das relativ positionierte Element befindet sich außerhalb des normalen Dokumentenflusses, seine Position im Dokumentenfluss ist jedoch weiterhin vorhanden, wird jedoch relativ zur ursprünglichen Position visuell verschoben.

Positionierung relativ zur normalen (ursprünglichen) Position durch die Einstellungen oben, unten, links und rechts. Eine hierarchische Einstufung kann über den Z-Index erfolgen.

.static1{
            height:80px;
            background-color: red;
        }
        .relative{
            height:80px;
            position:relative;
            top:40px;
            left:40px;
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="relative"></div>
    <div class="static2"></div>
</body>

Nach dem Login kopieren

3. Absolut (absolute Positionierung): Erzeugen Sie ein absolut positioniertes Element und positionieren Sie es relativ zum ersten übergeordneten Element, anders als bei der statischen Positionierung. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben. Die hierarchische Klassifizierung kann über den Z-Index erfolgen.

Eine als absolut positionierte Ebene wird vom normalen Dokumentenfluss getrennt, der Unterschied zur relativen Ebene besteht jedoch darin, dass ihre Position im normalen Dokumentenfluss nicht mehr vorhanden ist.

Manche Leute machen immer irreführende Angaben zu diesem Attribut. Es heißt, wenn das Positionsattribut auf „absolut“ gesetzt ist, wird es immer entsprechend dem Browserfenster positioniert. Dies ist tatsächlich falsch. Tatsächlich ist dies ein Merkmal fester Eigenschaften.

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            background-color: pink;
            position:relative;
            left:20px;    
        }
        .relative{
            height:80px;
            width:80px;
            position:absolute;
            top:10px;
            left:10px;
        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>

Nach dem Login kopieren

4. Fixed (feste Positionierung): Erzeugen Sie absolut positionierte Elemente und positionieren Sie sie relativ zum Browserfenster. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben. Die hierarchische Klassifizierung kann über den Z-Index erfolgen.

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            width:300px;
            background-color: pink;            
            left:100px;    
            top:100px;
        }
        .relative{
            height:80px;
            width:80px;
            position:fixed;
            left:20px;        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>

Nach dem Login kopieren

【Empfohlenes Lernen:

CSS-Video-Tutorial

】

Das obige ist der detaillierte Inhalt vonWas sind CSS-Positionierungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!