CSS Überlauf-y: sichtbar, Überlauf-x: scrollen

Ich gesehen habe ein paar Fragen wie diese in meiner Suche, aber entweder die Frage nicht richtig beantwortet oder keine Antwort gegeben wurde. So, ich werde wieder zu stellen.

<style>
.parent { overflow-y:scroll; overflow-x:visible; width:100px; }
.child { position:relative; }
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; }
</style>

  <div class="parent">
  <!-- Lots of the following divs -->
  <div class="child">
    Text Line
    <div class="child-menu">some pop out stuff</div>
  </div>
</div>

Okay, das ist nur ein Beispiel. Aber im Grunde, was ich versuche zu erreichen ist die .untergeordnete Klassen werden scrollbaren auf der y-Achse...nach oben und unten scrollen. Aber ich möchte die x-Achse....das Kind-Menüs werden sichtbar außerhalb der .übergeordneten container.

Macht das Sinn? Was ist also passiert, ist, dass, wenn die Seite gerendert wird, wird der browser die Interpretation der überlauf von dem auto insgesamt und nicht an die eigene Achse. Mache ich etwas falsch oder sind die Browser einfach nicht bis zu der CSS3-Spezifikation noch auf diesem? Meist nur getestet auf Chrome. CSS Überlauf-y: sichtbar, Überlauf-x: scrollen

InformationsquelleAutor der Frage Senica Gonzalez | 2011-03-06

css overflow

29

Habe ich es herausgefunden!

Die Eltern sollten overflow:auto;
Die .Kind sollte position:relative;
Die .Kind-Menü sein soll position:fixed; mit KEINE oben oder Links positionieren.
Wenn Sie dies tun, wird es halten Sie ihn mit dem Inhalt.

Wenn Sie brauchen, um die Kind-Menü verwenden Margen und nicht oben oder Links. Beispiel margin-left:-100px;

BEARBEITEN

Wie es scheint, die Menschen immer noch mit diesem, bitte beachten Sie, dass Sie haben, javascript zu verwenden, um die Bewegung der festen Elemente, wie die Seite scrollt.

InformationsquelleAutor der Antwort Senica Gonzalez

Es hier gelöst!
Verwenden Sie css und JS.

.child:hover .child-menu { display: block; }

 .parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px  }
    .child { position:static; }
    .child-menu { position:absolute; display:inline-block; display: none; }