Bauer: Referenzelement bei position:absolute

Hallo,

ich habe eine Frage bzgl. der Positionierung von Elementen via CSS. Wenn ich einem Kinderelement die Eigenschaft position:absolute zuweise, dann ist Referenzelement das nächsthöhere Vorfahrenselement, dass nicht position:static inne hat. Ist es möglich diese Standardeinstellung zu modifizieren und festzulegen, dass innerhalb eines spezifizierten Elements, alle Kinderelemente auf dessen Position referenzieren und nicht auf andere untergeordnete?

Vielen Dank im Voraus.

  1. Ist es möglich ... festzulegen, dass innerhalb eines spezifizierten Elements, alle Kinderelemente auf dessen Position referenzieren und nicht auf andere untergeordnete?

    Ja, indem du dem Referenzelement position:relative gibst, aber keine (von auto abweichende) Werte für top, left, bottom, right.

    Mathias

    1. »» Ist es möglich ... festzulegen, dass innerhalb eines spezifizierten Elements, alle Kinderelemente auf dessen Position referenzieren und nicht auf andere untergeordnete?

      Ja, indem du dem Referenzelement position:relative gibst, aber keine (von auto abweichende) Werte für top, left, bottom, right.

      Mathias

      Leider kann ich dir nicht ganz folgen. Die Position relativ belässt das jeweilige Element doch zuerst ein mal an der Position, die ihm im Rahmen des normalen Textflusses zugewiesen wurde. Positionswerte via left/right/top/bottom werden dann von diesem Punkt aus berechnet. Die Ursprungsposition, also die die durch den Textfluss vorgegeben wird, bestimmt sich doch allerdings nach der Position des nächsthöheren Vorfahrenelements. Meine Ausgangsfrage aber war, wie ich gerade diese Sache umgehen kann, also dass ich selbst festlege welches x-beliebige Vorfahrenelement das Referenobjekt sein soll. Relative und Absolute geben mir doch nur die Möglichkeit entweder auf das direkt nächsthöhere Element zu referenzieren oder das nächsthöhere das nicht position:static innehat.

      1. »» »» Ist es möglich ... festzulegen, dass innerhalb eines spezifizierten Elements, alle Kinderelemente auf dessen Position referenzieren und nicht auf andere untergeordnete?
        »»
        »» Ja, indem du dem Referenzelement position:relative gibst, aber keine (von auto abweichende) Werte für top, left, bottom, right.
        »»
        »» Mathias

        Leider kann ich dir nicht ganz folgen. Die Position relativ belässt das jeweilige Element doch zuerst ein mal an der Position, die ihm im Rahmen des normalen Textflusses zugewiesen wurde. Positionswerte via left/right/top/bottom werden dann von diesem Punkt aus berechnet. Die Ursprungsposition, also die die durch den Textfluss vorgegeben wird, bestimmt sich doch allerdings nach der Position des nächsthöheren Vorfahrenelements. Meine Ausgangsfrage aber war, wie ich gerade diese Sache umgehen kann, also dass ich selbst festlege welches x-beliebige Vorfahrenelement das Referenobjekt sein soll. Relative und Absolute geben mir doch nur die Möglichkeit entweder auf das direkt nächsthöhere Element zu referenzieren oder das nächsthöhere das nicht position:static innehat.

        Was ich natürlich machen kann ist, das Element, welches ich als Referenzobjekt spezifizieren möchte, mittels position:relative zu markieren. Alle untergeordneten Nachfahrenelemente belasse ich bei position:static. Und allen Elementen, von denen ich möchte, dass sie auf das markierte Element referenzieren, weise ich position:absolute zu. Ich denke, das entspricht so auch der Logik wie es von der Sprache intendiert ist. Bei dieser Konstruktion begegne ich aber dem Problem, dass nun alle Elemente, die via position:absolute auf das markierte Element referenzieren, sich an diesem Punkt (x/y) überlagern. Wenn du oder irgend jemand mir sagen könnte, wie ich zwischen all diesen Elementen die auf das spezifizierte Vorfahrenelement referenzieren, wieder den normalen Textfluss herstellen könnte, hätte ich die Sache gelöst.

        1. Bei dieser Konstruktion begegne ich aber dem Problem, dass nun alle Elemente, die via position:absolute auf das markierte Element referenzieren, sich an diesem Punkt (x/y) überlagern.

          Ja - so funktioniert position:absolute. Bzw. wenn du einem Element einfach position:absolute gibst, dann wird es aus dem Fluss genommen und nachfolgende Element rutschen hoch, es bleibt aber an der ursprünglichen Position.

          Wenn du oder irgend jemand mir sagen könnte, wie ich zwischen all diesen Elementen die auf das spezifizierte Vorfahrenelement referenzieren, wieder den normalen Textfluss herstellen könnte, hätte ich die Sache gelöst.

          Das geht nicht. So funktioniert absolute Positionierung nicht. Wenn einerseits X Elemente an einem Element ausrichten willst, sie aber untereinander einen eigenen Fluss bilden sollen, dann kannst du nicht position:relative/absolute verwenden, sondern musst deine Markup-Struktur sowie deine Formatierungen entsprechend ändern.

          Was hast du genau vor?

          Mathias

          1. »» Bei dieser Konstruktion begegne ich aber dem Problem, dass nun alle Elemente, die via position:absolute auf das markierte Element referenzieren, sich an diesem Punkt (x/y) überlagern.

            Ja - so funktioniert position:absolute. Bzw. wenn du einem Element einfach position:absolute gibst, dann wird es aus dem Fluss genommen und nachfolgende Element rutschen hoch, es bleibt aber an der ursprünglichen Position.

            »» Wenn du oder irgend jemand mir sagen könnte, wie ich zwischen all diesen Elementen die auf das spezifizierte Vorfahrenelement referenzieren, wieder den normalen Textfluss herstellen könnte, hätte ich die Sache gelöst.

            Das geht nicht. So funktioniert absolute Positionierung nicht. Wenn einerseits X Elemente an einem Element ausrichten willst, sie aber untereinander einen eigenen Fluss bilden sollen, dann kannst du nicht position:relative/absolute verwenden, sondern musst deine Markup-Struktur sowie deine Formatierungen entsprechend ändern.

            Was hast du genau vor?

            Mathias

            Im Grunde geht es um ein simples fly-out Menü, vertikal ausgerichtet, mit der "Besonderheit", dass die Submenüs nicht auf der Höhe beginnen, wo der jeweilige Übermenüpunkt sitzt, sondern immer auf der Höhe des aller obersten Menüpunktes des ganzen Menüs.
            Da habe ich eben das Problem, dass gemäß dem Textfluss das Submenü natürlich auf der Höhe des jeweiligen Übermenüpunktes beginnt. Will ich dem Submenü aber sagen, dass es immer an der exakt gleichen Höhe beginnen soll, egal wo sich sein Übermenüpunkt befindet, geht das nur über position:absolute. Das zestört dann natürlich den Textfluss. Logische Lösung ist es wohl, die jeweiligen Submenüpunkte wieder in einem Element zu gruppieren, und dann innerhalb dieses Elements den Textfluss wieder herstzustellen. Ich werde das jetzt mal ausprobieren.

            1. [latex]Mae  govannen![/latex]

              Im Grunde geht es um ein simples fly-out Menü, vertikal ausgerichtet, mit der "Besonderheit", dass die Submenüs nicht auf der Höhe beginnen, wo der jeweilige Übermenüpunkt sitzt, sondern immer auf der Höhe des aller obersten Menüpunktes des ganzen Menüs.

              Meinst du die Funktionalität in etwa wie hier oder verstehe ich das falsch?

              Cü,

              Kai

              --
              „It's 106 miles to Chicago, we got a full tank of gas, half a pack of cigarettes, it's dark, and we're wearing sunglasses“.
              „Hit it!“
              Selfzeugs
              SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
              1. Lieber Kai345,

                wie hier

                na, das ist doch mal ein schönes Nagativbeispiel! Probiere doch einmal das Untermenü "3 g i" zu erreichen... Wer nicht weiß, dass die freie Fläche unterhalb des Unteruntermenüs "gefahrlos" mit der Maus überfahren werden kann, ohne dass sich alles wieder schließt, der ärgert sich, dass er nicht alle Untermenüs störungsfrei benutzen kann.

                Liebe Grüße,

                Felix Riesterer.

                --
                ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
                1. Lieber Kai345,

                  »» wie hier

                  na, das ist doch mal ein schönes Nagativbeispiel! Probiere doch einmal das Untermenü "3 g i" zu erreichen... Wer nicht weiß, dass die freie Fläche unterhalb des Unteruntermenüs "gefahrlos" mit der Maus überfahren werden kann, ohne dass sich alles wieder schließt, der ärgert sich, dass er nicht alle Untermenüs störungsfrei benutzen kann.

                  Liebe Grüße,

                  Felix Riesterer.

                  Hehe, genau das hab ich gesucht. Hab es mittlerweile auch so hinbekommen. Der Trick war natürlich tatsächlich ein übergeordnetes Element einzuführen, dass sich an dem absoluten Punkt ausrichtet, und innerhalb dieses Elements den Textfluss der einzelnen Untermenüpunkte garantiert.

                  @Felix
                  So absurd ich es finde, anstatt die Fragen von Leuten zu beantworten, ihnen vor Augen zu führen, dass es dumm ist überhaupt nach der Antwort zu suchen, weil das Ergebnis nicht praktikabel sei (denn oftmals ist der Weg das Ziel...), so will ich dir doch eine Antwort geben. In meinem speziellen Fall haben Haupt- und Untermenüs immer die exakt gleiche Höhe, eine solche "freie Fläche" wie in dem Beispiel taucht also nicht auf.

                  Vielen Dank an alle die geholfen haben und eine angenehme Nachtruhe.

                  1. Lieber Bauer,

                    So absurd ich es finde, anstatt die Fragen von Leuten zu beantworten, ihnen vor Augen zu führen, dass es dumm ist überhaupt nach der Antwort zu suchen, weil das Ergebnis nicht praktikabel sei (denn oftmals ist der Weg das Ziel...), so will ich dir doch eine Antwort geben.

                    Was ich für nicht gut gelöst halte ist nicht, überhaupt ausklappbare Menüs zu erstellen, sondern alle Unter(-unterunter-)menüs immer auf derselben Höhe beginnen zu lassen. Was wäre denn beim verlinkten Beispiel so schlimm gewesen, die jeweiligen Untermenüs auf derselben Höhe erscheinen zu lassen, wie der gerade gehoverte übergeordnete Menüeintrag, damit der oberste Eintrag des aufklappenden Menüs direkt rechts daneben erreichbar ist?

                    Deswegen mein "Negativbeispiel".

                    Vielen Dank an alle die geholfen haben und eine angenehme Nachtruhe.

                    Das nächste Mal unterlasse bitte sinnlose Komplett-Zitate, und kürze Zitiertes stattdessen auf relevante Ausschnitte. Danke.

                    Liebe Grüße,

                    Felix Riesterer.

                    --
                    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
                  2. [latex]Mae  govannen![/latex]

                    @Felix
                    So absurd ich es finde, anstatt die Fragen von Leuten zu beantworten, ihnen vor Augen zu führen, dass es dumm ist überhaupt nach der Antwort zu suchen, weil das Ergebnis nicht praktikabel sei (denn oftmals ist der Weg das Ziel...)

                    Felix hat hier lediglich und zurecht auf einen (IMO bedeutenden) Bedientechnik-Fehler in diesem speziellen Menü hingewiesen, der in deinem Fall zwar offenbar nicht zum Tragen kommt; dennoch ist es wichtig, darauf hinzuweisen, denn der Nächste baut ggf. ein Menü nach diesem Beispiel und "behindert" seine Nutzer, da diese etwas völlig unerwartetes tun müßten, um das sub-sub-menü erreichen zu können, denn in der Regel schließt das Menü beim Verlassen des hervorgehobenen Bereiches.

                    Cü,

                    Kai

                    --
                    „It's 106 miles to Chicago, we got a full tank of gas, half a pack of cigarettes, it's dark, and we're wearing sunglasses“.
                    „Hit it!“
                    Selfzeugs
                    SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
                2. [latex]Mae  govannen![/latex]

                  na, das ist doch mal ein schönes Nagativbeispiel! Probiere doch einmal das Untermenü "3 g i" zu erreichen... Wer nicht weiß, dass die freie Fläche unterhalb des Unteruntermenüs "gefahrlos" mit der Maus überfahren werden kann, ohne dass sich alles wieder schließt, der ärgert sich, dass er nicht alle Untermenüs störungsfrei benutzen kann.

                  Das ist schlecht. Ich würde das Menü demzufolge nur durch reinen Zufall erreicht haben, da ich wohl nie auf die Idee gekommen wäre, den freien Bereich zu überstreichen.

                  Aber mir ging es ohnehin erst einmal nur darum, herauszufinden, ob das Beispiel prinzipiell in Etwa so aufgebaut ist, wie der OP wollte, oder ob ich dessen Beschreibung völlig mis(s|t)verstanden hatte.

                  Cü,

                  Kai

                  --
                  „It's 106 miles to Chicago, we got a full tank of gas, half a pack of cigarettes, it's dark, and we're wearing sunglasses“.
                  „Hit it!“
                  Selfzeugs
                  SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?