Pokaż element potomny nad elementem nadrzędnym za pomocą CSS

Question

Mam dwa elementy div, jeden zagnieżdżony w drugim. Element nadrzędny ma zdefiniowaną szerokość/wysokość. Jak mogę wyświetlić element div powyżej elementu nadrzędnego (poza nim) przy użyciu tylko CSS?

EDYCJA: Przepraszam, może powinienem wyjaśnić, że mam na myśli "powyżej" jako wzdłuż osi Z. I tak, już próbowałem z-index. Mój problem polega na tym, że gdy element potomny jest większy od elementu nadrzędnego, powoduje efekt "ramki" lub "okna", odcinając część elementu div.

Answer 1

Ustawna div rodzica.

#parent { 
    overflow: visible; 
} 

Zmieniono, aby odzwierciedlało aktualizację pytającego.

Answer 2

Jeśli masz pewność, że trzeba to zrobić, a następnie spróbuj umieścić

margin-top: -100px; na elemencie podrzędnym lub jakkolwiek wiele pikseli jest potrzebne, aby pojawił się powyżej.

Answer 3

Możesz użyć definicji pozycji, aby umieścić ją względnie lub absolutnie na stronie. IE:

Aby wyświetlić go bezpośrednio powyżej, zastępowałbyś 100px w tym zestawieniu rozmiarem ramki podrzędnej.

 
.child{ 
    position: relative; 
    top: -100px; 
} 

Answer 4

zrobić to w ten sposób:

.child { 
position: absolute; 
margin: -100px; 
} 

Korzystanie position: absolute będzie pozbyć się pustych przestrzeni pozostawionej przez dziecko, gdy robi się przesunąć w górę.

Edytuj - po przeczytaniu aktualizacji: pozycja: bezwzględna nadal obowiązuje w tej sytuacji. Usuwa dziecko z rodzica. Następnie używasz marginesów, aby ustawić to, jak chcesz.

W ten sposób możesz sprawić, że dziecko będzie większe niż rodzic i nad nim.

.parent{ 
height: 50px; 
width: 50px; 
} 
.child { 
position: absolute; 
height: 100px; 
width: 100px; 
margin: -75px 0 0 -75px; 
} 

Answer 5

Podobnie jak powiedział Chacha, powinieneś dać rodzicowi pozycję krewnego, a dziecko pozycję absolutną, a następnie dać dziecku górę: -100px.

Czy rodzic ma ustawiony przelew na ukryty? To może utrudnić twoje wysiłki.

Answer 6

Można ustawić ujemny margines dla elementu nadrzędnego, przesunięty o dopełnienie - na przykład margines po lewej: -100px; padding-left 100px. To da ci 100 pikseli na lewo, gdzie dziecko może się pokrywać i nadal być na górze.