Absolute positioniert div nicht versteckt

Question

Ich habe dieses

<div id="container"> 
    <div id="div1"></div> 
<div> 

Nun lassen Sie uns annehmen, dass:

• der "Container" hat eine Breite von 300px
• der "Container" Überlauf hat: versteckt ;
• das "div1" hat eine Breite von 1000px;
• das "div1" ist absolut positioniert, oben: 0px, links: 0px;

Das Problem:

Die "div1" versteckt ist nicht, den "Container" überläuft, aber es zeigt immer noch :(

Wenn ich die "position: absolute" einfach entfernen. Wird es Arbeit.

Wie kann ich den Überlauf von "div1" verbergen?

Answer 1

Add Position: relativ zum Behälter div Element .:

Exa:

<style type="text/css"> 
     #container 
     { 
      width: 200px; 
      background-color: red; 
      height: 60px; 
      color: white; 
      position: relative; 
      overflow: hidden; 
     } 

     #div1 
     { 
      background-color: blue; 
      position: absolute; 
      top:0px; 
      left:0px; 
      width: 300px; 
     } 
    </style> 

<div id="container"> 
     <div id="div1">This is div1</div> 
    <div> 

Answer 2

Zugabe

#container { position: relative; } 

wird den Überlauf ausblenden.

Answer 3

Position Hinzufügen von absoluten zu einem Elemente wird das Element aus dem normalen Fluss entfernen. Es positioniert sich absolut zum nächsten Elternteil, der relativ positioniert ist.

Deshalb wird das Hinzufügen von "position: relativ" zum "Container" den gewünschten Effekt erzielen.