przepełnienie: ukryte nie obejmuje zawartości pozycjonowanej bezwzględnie

Question

Próbuję utworzyć okno z przewijanym tekstem w środku. Problem polega na tym, że gdy tekst znajduje się w połowie okna, pojawia się poza nim, kiedy oczekuję, że zostanie przycięty.

HTML/CSS jest bardzo prosta i nie mam pojęcia co może być nie tak:

#vbox { 
 
    width: 100px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    background: #afa; 
 
} 
 
#vtext { 
 
    position: absolute; 
 
    width: 100px; 
 
    top: 250px; 
 
}

<div id="vbox"> 
 
    <div id="vtext"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
 
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
 
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> 
 
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p> 
 
    </div> 
 
</div>

nie jest "overflow: hidden;" sądzisz, aby ukryć przepełnione treści?

Edit:

Dodawanie stanowisko służbowe: „względna” do okna rozwiązuje ten problem, ale nadal jestem zaskoczony ... Może ktoś wyjaśnić to zachowanie?

Answer 1

Ustawienie bezwzględnie ustawione nie ma wpływu na ustawienie overflow, jeśli element z tym ustawieniem nie jest (lub nie zawiera) jego bloku zawierającego (zwykle oznacza to, że nie jest umieszczony).

W twoim przypadku pudełko nie jest ustawione, więc tekst jest zakotwiczony w oknie roboczym zamiast w polu. W polu nie ma informacji o tekście, a obszar wyświetlania jest wystarczająco duży, aby pomieścić tekst, więc w ogóle nie występuje obcinanie. Możesz znaleźć krwawe szczegóły w section 11.1 specyfikacji.

Podanie pola position: relative spowoduje, że tekst zostanie umieszczony względem ramki i zostanie przycięty w wyniku.

#vbox { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    background: #afa; 
 
} 
 
#vtext { 
 
    position: absolute; 
 
    width: 100px; 
 
    top: 250px; 
 
}

<div id="vbox"> 
 
    <div id="vtext"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
 
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
 
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> 
 
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p> 
 
    </div> 
 
</div>

Answer 2

nie rób element wewnątrz skrzynki position:absolute.

CSS

#vbox{ 
    width:100px; 
    height:500px; 
    overflow:auto; 
    background:#afa; 
} 
.vtext{ 
    font-size: 12px; 
} 

Zobacz zaktualizowane http://jsfiddle.net/V98bg/4/