Uso di overflow-y: nascosto o overflow-x: nascosto per nascondere solo un lato di un elemento

Question

Il titolo fa quasi la domanda ma so che usando overflow-y: hidden e overflow-x: hidden è possibile nascondere sia la parte superiore che quella inferiore o sinistra e guidare lato di un elemento ma c'è un modo per nascondere solo un lato usando questi selettori.

In particolare, mi interessa nascondere il fondo di un div che trabocca ma non la parte superiore.

In caso contrario, esiste un altro modo CSS per ottenere questo effetto desiderato?

C'è uno scopo legittimo per aver bisogno di questo e mi piacerebbe vedere se c'è un modo standard per farlo.

Per spiegare un po ', io sono solo il controllo del CSS per una presentazione e ho bisogno di spingere un elemento all'interno della presentazione div al di sopra della div tuttavia i valori overflow: hidden stanno tagliando fuori questo spinto verso l'alto div quando faccio questo. Posso rimuovere completamente lo overflow: hidden, ma non è una buona presentazione!

un violino è riportato qui di seguito:

https://jsfiddle.net/ejhyz7t3/

Answer 1

Il jsfiddle seguito sulla base dell'esempio in questione fornisce l'effetto desiderato di tagliare solo il bordo inferiore utilizzando clip:

https://jsfiddle.net/ejhyz7t3/2/

Il codice completo è copiato sotto per riferimento:

HTML

<div class="outer-container"> 
    <div class="inner-container"> 
    </div> 
</div> 

CSS

.outer-container { 
    background: red; 
    height: 100px; 
    margin-top: 100px; 
    width: 150px; 
    padding-left: 50px; 
} 

.inner-container { 
    background: green; 
    height: 200px; 
    width: 100px; 
    transform: translateY(-50px); 
    position: absolute; 
    clip: rect(0, 100px, 150px, 0); 
} 

Answer 2

Ho avuto un problema simile in cui ho avuto un div trascinabile che ho voluto a traboccare verso destra/verso il basso, ma non superiore/sinistra. L'ho risolto regolando lo z-index. Il contenitore div a z-index: 0px; il draggable to z-index: 500px; e i div in alto e a sinistra (menu) in z-index: 1000px ;. Ciò ha efficacemente incastrato lo strato trascinabile consentendo di traboccare nelle direzioni che volevo.

Answer 3

.mydiv { 
    clip: rect(-100px, -100px, auto, -100px); 
} 

Impostazione della parte inferiore della clip rect a auto clip come overflow: hidden avrebbero. I valori -100px sono scelti in modo arbitrario per lasciare spazio per lo straripamento.