Warum kommt oft position: relative vor?

[marcelgerard]

Hallo Leute,

ich lerne zur Zeit HTML und CSS mit einem super guten Buch und ich bin erstaunlich gut vorangekommen. Ein paar kleinere Kenntnisse hatte ich schon über die Jahre gesammelt. Es gibt aber ein paar Punkte, die ich bisher noch nicht 100% verstanden habe. Dazu gehört auch die Verwendung position; relative; - das ihr mich nicht falsch versteht, ich weiß was die Eigenschaft macht und ich weiß auch für was sie ab und an gut ist.

z.B habe ich jetzt verstanden, wenn man dem Elternelement relative gibt, kann man dem Kindelement problemlos absolute verpassen und es verhält sich nur noch in dem Elternelement. Das scheint eine sehr oft angewendete Methode zu sein.

Allerdings hab ich das Gefühl, dass diese Eigenschaft oft sinnlos eingesetzt wird, außer ich verstehe es einfach nicht. Hier ein Beispiel. Geht mal auf die diese Seite und untersucht mit dem Browser das Bild (mit den drei Musikern drauf). Der Selektor dafür ist "article-image". Dieser Selektor hat die Eigenschaft position: relative; - aber wieso? Es scheint mir auf den ersten Blick sinnlos zu sein.

Vielleicht kann mich jemand aufklären, damit ich das 100% verstehe.

Liebe Grüße
Marcel

 

[scbawik]

Hallo Leute,

ich lerne zur Zeit HTML und CSS mit einem super guten Buch und ich bin erstaunlich gut vorangekommen. Ein paar kleinere Kenntnisse hatte ich schon über die Jahre gesammelt. Es gibt aber ein paar Punkte, die ich bisher noch nicht 100% verstanden habe. Dazu gehört auch die Verwendung position; relative; - das ihr mich nicht falsch versteht, ich weiß was die Eigenschaft macht und ich weiß auch für was sie ab und an gut ist.

z.B habe ich jetzt verstanden, wenn man dem Elternelement relative gibt, kann man dem Kindelement problemlos absolute verpassen und es verhält sich nur noch in dem Elternelement. Das scheint eine sehr oft angewendete Methode zu sein.

Allerdings hab ich das Gefühl, dass diese Eigenschaft oft sinnlos eingesetzt wird, außer ich verstehe es einfach nicht. Hier ein Beispiel. Geht mal auf die diese Seite und untersucht mit dem Browser das Bild (mit den drei Musikern drauf). Der Selektor dafür ist "article-image". Dieser Selektor hat die Eigenschaft position: relative; - aber wieso? Es scheint mir auf den ersten Blick sinnlos zu sein.

Vielleicht kann mich jemand aufklären, damit ich das 100% verstehe.

Liebe Grüße
Marcel

Ich vermute um im article-image noch andere Elemente zu platzieren.
zB: eine Bildunterschrift mit position:absolute über das Bild gelegt.

Es hat also auf dieser Seite keinen direkten Nutzen. Könnte es in Zukunft aber haben bzw. wird auf anderen Seiten mit selbem CSS bereits so eingesetzt.

EDIT: Ja, wenn du dir die ganze CSS ansiehst, wirst du auf folgendes stoßen:

.article-image {
    position: relative
}

.article-image .button {
    position: absolute;
    left: 15px;
    bottom: 15px;
    margin-bottom: 0
}

 

[MrMurphy]

Hallo

Allerdings hab ich das Gefühl, dass diese Eigenschaft oft sinnlos eingesetzt wird

Richtig. Die position-Angaben sind meist vollkommen überflüssig und bei responsive Designs sogar hinderlich.

Der Hintergrund ist wohl, dass viele Webseitenersteller ihre Webseiten wie auf dem Papier erstellen möchten. Als Grundlage nehmen sie dann ihren Desktop-Monitor. Mit den position-Angaben die Position von bestimmen Elementen genau bestimmen.

Das war schon falsch, als es vor 10 und mehr Jahren nur einige wenige Bildschirmgrößen gab. Seit der Verbreitung von Smartphones und Tablets fliegen ihnen solche position-Angaben regelmäßig um die Ohren. Webseiten hatten und haben nun mal keine Größe.

Sehr informativ dazu ist folgende Anleitung

http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html

Auch durch die Weiterentwicklung von CSS sind position-Angaben nur noch in wenigen Ausnahmefällen sinnvoll.

Gruss

MrMurphy

 

[scbawik]

Hallo



Richtig. Die position-Angaben sind meist vollkommen überflüssig und bei responsive Designs sogar hinderlich.

Der Hintergrund ist wohl, dass viele Webseitenersteller ihre Webseiten wie auf dem Papier erstellen möchten. Als Grundlage nehmen sie dann ihren Desktop-Monitor. Mit den position-Angaben die Position von bestimmen Elementen genau bestimmen.

Das war schon falsch, als es vor 10 und mehr Jahren nur einige wenige Bildschirmgrößen gab. Seit der Verbreitung von Smartphones und Tablets fliegen ihnen solche position-Angaben regelmäßig um die Ohren. Webseiten hatten und haben nun mal keine Größe.

Sehr informativ dazu ist folgende Anleitung

http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html

Auch durch die Weiterentwicklung von CSS sind position-Angaben nur noch in wenigen Ausnahmefällen sinnvoll.

Gruss

MrMurphy

Sorry, aber das kann ich so nicht stehen lassen.
In oben genanntem Fall macht die Verwendung absolut Sinn. Wie auch in vielen anderen Fällen.

Keine ordentliche Website, geschweige denn GUI, kommt ohne position aus. KEINE.

 

[marcelgerard]

Okay, dann habe ich das doch richtig verstanden und auf der einen Seite wird es für das Kindelement für absolute verwendet und als zweites kommt es gut und gerne mal einfach für den Fall der Fälle dazu. Obwohl man da sja auch noch theoretisch wenn man mal was verändert einsetzen könnte.

Das article-image .button hab ich jetzt gar nicht gesehen, weil gar kein Kindelement zu sehen war. Aber dann macht das natürlich wieder sinn.

Ein ähnliches Problem hab ich mit display block, inline und inline-block, da hab ich auch noch kleinere Fragezeichen. Ich hab das mal an einem div Container ausprobiert der 4 div Container drin hat. bei inline-block wandern die alle von links nach rechts auf eine Linie, bei Block oder eben gar nichts (none) bleiben sie untereinander. Bei nur inline gehen sie auch von links nach rechts bez. eine Linie aber verhalten sich anders.

 

[scbawik]

Okay, dann habe ich das doch richtig verstanden und auf der einen Seite wird es für das Kindelement für absolute verwendet und als zweites kommt es gut und gerne mal einfach für den Fall der Fälle dazu. Obwohl man da sja auch noch theoretisch wenn man mal was verändert einsetzen könnte.

Das article-image .button hab ich jetzt gar nicht gesehen, weil gar kein Kindelement zu sehen war. Aber dann macht das natürlich wieder sinn.

Ein ähnliches Problem hab ich mit display block, inline und inline-block, da hab ich auch noch kleinere Fragezeichen. Ich hab das mal an einem div Container ausprobiert der 4 div Container drin hat. bei inline-block wandern die alle von links nach rechts auf eine Linie, bei Block oder eben gar nichts (none) bleiben sie untereinander. Bei nur inline gehen sie auch von links nach rechts bez. eine Linie aber verhalten sich anders.

Du vergisst dass jedes Element Default CSS-Eigenschaften hat.
Ein <div>, <h1>, <p>, etc. hat standardmäßig display:block;
Ein <img> hat standardmäßig display:inline-block;
Ein <span> hat standardmäßig display:inline;
Ein <table> display:table;
usw.

"none" ist noch einmal ganz etwas anderes als einfach den Standardwert (im Falle von div "block") zu belassen.

Hier eine komplette Liste der zur Verfügung stehenden Werte:
https://developer.mozilla.org/en-US/docs/Web/CSS/display?v=control

 

[SpiceLab]

Du vergisst dass jedes Element Default CSS-Eigenschaften hat.
Ein <div>, <h1>, <p>, etc. hat standardmäßig display:block;
Ein <img> hat standardmäßig display:inline-block;
Ein <span> hat standardmäßig display:inline;
Ein <table> display:table;

Und alle Elemente, die ohne position:absolute|fixed|relative|sticky-Regel im HTML-Code existieren, vereinen sich standardmäßig voreingestellt als position:static

• https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position#position:_static

... und dürften hier und dort sicherlich die Anzahl der relativ positionierten Elemente übertrumpfen :) ("Computed"-/"Berechnet"-CSS im DevTool des Browsers gibt darüber näheren Aufschluss)

Um mal elegant den Kreis (Richtung Topic) geschlossen zu haben

 

[Tronjer]

Nebenbei bemerkt ist position: absolute ein Attribut, das bei responsiven Webseiten nur noch sehr selten zum Einsatz kommt. Anwendungsfälle wären bsw. Overlays über den gesamten Viewport oder per JavaScript nachträglich ins DOM eingehängte Elemente, die beim Cursor positioniert werden sollen.

 

[scbawik]

Ja, das war früher aber nicht anders.

Sorry, ich kann dieses "das bei responsiven Webseiten nur noch sehr selten zum Einsatz kommt" einfach nicht akzeptieren. Wie oft es zum Einsatz entscheidet immer noch der Anwendungsfall. Es ist ja nicht so als ob es eine Alternative dazu gäbe.

Responsive kann auch ein position:absolute sein.

 

[marcelgerard]

Also ich muss da auch widersprechen, ich hab mir die CSS Daten einiger neuen responsiven Websiten angesehen und musste feststellen, am häufigsten kommt vor, dass ein Elternelement relative hat und ein darin sitzendes Kindelement absolute, es scheint also sehr gängig zu sein.

 

[scbawik]

Also ich muss da auch widersprechen, ich hab mir die CSS Daten einiger neuen responsiven Websiten angesehen und musste feststellen, am häufigsten kommt vor, dass ein Elternelement relative hat und ein darin sitzendes Kindelement absolute, es scheint also sehr gängig zu sein.

Dass absolute so verhasst ist, hat eigentlich nicht mit der Eigenschaft selbst zu tun, sondern dass es - insbesondere früher - von Anfängern oft falsch eingesetzt wurde. Teilweise wurden sämtliche Elemente einer Website mit position:absolute positioniert. Das ist natürlich kompletter quatsch.

Daraus hat sich in Foren ein "Trend" entwickelt, Anfängern grundsätzlich von absolute abzuraten, egal in welchem Kontext. Nur für mich persönlich schadet es mehr als es hilft, irgendwelche Features pauschal als Bad Practice abzustempeln.

 

[MrMurphy]

Hallo

ich hab mir die CSS Daten einiger neuen responsiven Websiten angesehen

Dann zeig mal her.

Gruss

MrMurphy

 

[scbawik]

Hallo



Dann zeig mal her.

Gruss

MrMurphy

Bootstrap, Materialize, Youtube, Apple...

Ich glaube das Thema kann geschlossen werden :)

 

[Tronjer]

Also ich muss da auch widersprechen, ich hab mir die CSS Daten einiger neuen responsiven Websiten angesehen und musste feststellen, am häufigsten kommt vor, dass ein Elternelement relative hat und ein darin sitzendes Kindelement absolute ...

Häufig deshalb, um das Child am unteren Ende des Parents zu positionieren. Das lässt sich aber ebenso gut mittels Flex-Layout bewältigen.