Pertanyaan Menggunakan overflow-y: hidden atau overflow-x: tersembunyi untuk hanya menyembunyikan satu sisi elemen


Judulnya cukup banyak mengajukan pertanyaan tetapi saya tahu menggunakannya overflow-y: hidden dan overflow-x: hidden Anda dapat menyembunyikan sisi atas dan bawah atau kiri dan naik dari suatu elemen tetapi apakah ada cara untuk hanya menyembunyikan satu sisi menggunakan pemilih ini.

Secara khusus saya tertarik menyembunyikan bagian bawah div yang meluap tetapi bukan bagian atas.

Jika tidak ada CSS lain hanya cara untuk mencapai efek yang diinginkan ini?

Ada tujuan yang sah untuk memerlukan ini dan saya ingin melihat apakah ada cara standar untuk melakukan ini.

Untuk menjelaskan sedikit, saya hanya mengendalikan CSS untuk tampilan slide dan saya perlu mendorong elemen di dalam slideshow div di atas div Namun demikian overflow: hidden nilai-nilai memotong ini didorong div ketika saya melakukan ini. Saya bisa menghapus overflow: hidden benar-benar tentu saja tetapi kemudian itu tidak membuat tayangan slide yang sangat bagus!

Sebuah biola termasuk di bawah ini:

https://jsfiddle.net/ejhyz7t3/


7
2018-03-26 22:45


asal


Jawaban:


Di bawah ini jsfiddle berdasarkan contoh dalam pertanyaan memberikan efek yang diinginkan dari pemotongan hanya menggunakan tepi bawah clip:

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

Kode lengkapnya disalin di bawah ini sebagai referensi:

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);
}

1
2017-07-25 17:40



Saya memiliki masalah serupa di mana saya memiliki div yang draggable yang saya ingin meluap ke kanan / bawah, tetapi tidak atas / kiri. Saya memecahkannya dengan menyesuaikan z-index. Container div ke z-index: 0px; draggable ke z-index: 500px; dan div di bagian atas dan kiri (menu) ke z-index: 1000px ;. Ini secara efektif mengapit lapisan draggable yang memungkinkan untuk meluap ke arah yang saya inginkan.


0
2017-08-26 17:39



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

Mengatur bagian bawah rekta klip ke auto klip suka overflow: hidden akan memiliki. Itu -100px nilai-nilai dipilih secara sewenang-wenang untuk meninggalkan ruang untuk meluap.


-1
2017-11-09 12:21