Warum relative Position setzen, wenn nicht nötig

Question

Ich sehe viele Seiten, die position: relative; in Blockelementen setzen, wenn sie keine Position in inneren Elementen verwenden. Gibt es einen anderen Grund, die Position relativ zu setzen?

Beispiel:

<div class="parent"> 
    <div class="parent__container"> 
    other elements here. 
    </div> 
</div> 

.parent { 
    background-color: blue; 
} 

.parent__container { 
    position: relative; 
    // etc 
} 

und die inneren Elemente keine Verwendung von Position machen, manchmal ich sogar den .parent mit position: relative; Satz zur Verfügung.

Dies ist sehr, sehr häufig, ich kann mehrere Websites zeigen, die die Position ohne Notwendigkeit setzen (zumindest denke ich).

Danke.

Answer 1

Es gibt grundsätzlich 3 Gründe, warum man ein Element auf position: relative

1. neu zu positionieren das Element selbst, das heißt top: 20px

2. Um z-index auf dieses Element zu verwenden. Ein Nebeneffekt, wenn man keinen z-index setzt, wird es sich immer noch auf statisch positionierten Elementen positionieren.

3. Begrenzen Sie den Bereich von absolut positionierten untergeordneten Elementen, sodass ein Kind des relativ positionierten Elements absolut innerhalb dieses Blocks positioniert werden kann.

---

Hier ist ein alter Artikel, der die Differenz zwischen den am meisten verwendeten Positionswerte beschreibt:

• https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 2

Die meisten Websites verwenden heutzutage "relative" Positionierung, um ihre Websites flexibel und kompatibel mit Small-Screen-Geräten wie Smartphones und nicht 16x9-konformen Geräten zu machen. Der ursprüngliche Zweck der Verwendung der Relativpositionierung gegenüber der absoluten Positionierung bestand darin, dem Programmierer zu erlauben, der Webseite zu erlauben, die Positionierung basierend auf der hierarchischen Reihenfolge zu handhaben, sofern nicht anders durch den Programmierer angegeben.

Bearbeiten: Beachten Sie, dass durch Definition von "relativ" ein Element und seine untergeordneten Elemente eine bestimmte hierarchische Reihenfolge im DOM-Modell erhalten; es sagt einem Element nicht unbedingt, wie es sich positionieren soll (aka weiß, dass es links- oder rechtsbündig ausgerichtet ist), sondern erzeugt eine "Box" oder einen "Container", in dem ein Element und seine Kinder basierend auf seiner Verschachtelung eine bestimmte hierarchische Ordnung erhalten HTML, dem das HTML-Dokument als Ganzes entsprechen muss. Mit anderen Worten definiert "relativ" die Priorität/Hierarchie eines Elements in Bezug auf seine Eltern.

Umgekehrt würde ein Programmierer, wenn er bestimmte Elemente statisch positionieren wollte, "position: absolute" verwenden. um dieses Element relativ zu seinem Elternelement statisch zu machen. Zum Beispiel:

<div class="parentA">ParentA Text 
 
     <div class="childA"> 
 
      All elements become positioned absolutely, requiring defined positions using margins, alginment and etc. Note that this may or may not be inherited depending on the browser and the code. 
 
     </div> 
 
    </div> 
 
    <div class="parentB">ParentB Text 
 
     <div class="childB"> 
 
      All elements become positioned relatively, requiring no defined positions using margins, alginment and etc, unless desired. This makes the webpage very flexible (dynamic in the position of its elements). 
 
     </div> 
 
    </div> 
 
    <div class="parentC">ParentC Text 
 
     <div class="childC"> 
 
      All elements in and under childC become positioned absolutely relative to parentC, requiring defined positions using margins, alginment and etc. 
 
      <div class="grandChildC"> 
 
      Grandchild 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <style> 
 
    .parentA { 
 
     position: absolute; 
 
    } 
 
    
 
    .parentB { 
 
     position: relative; 
 
    } 
 
    
 
    
 
    .parentC { 
 
     margin: 60px; 
 
    } 
 
    .childC { 
 
     position: absolute; 
 
    } 
 
    </style>

Wie oben gesehen, da parentB relativ ist, beginnt es, wo immer Parenta aufhörte. Da Eltern A keine Größe hat und als absolutes/statisches Objekt definiert ist, überlappen sich die beiden Divs. Umgekehrt, da partentC relativ ist und childC absolut ist, wird childC dorthin weitergehen, wo sich parentC befindet, jedoch bleibt seine Gliederung statisch und über anderen Elementen, dh statisch relativ zur Position von parentC.

Ich hoffe, dass dies Ihre Frage beantwortet. Wenn nicht, sei klarer, was du zu fragen versuchst.