CSS: Cara mendapatkan posisi: div absolut di dalam posisi: div relatif tidak dapat dipotong oleh luapan: disembunyikan di sebuah wadah

144

Saya memiliki 3 level div:

(Hijau di bawah) Level teratas divdengan overflow: hidden. Ini karena saya ingin beberapa konten (tidak ditampilkan di sini) di dalam kotak itu untuk dipotong jika melebihi ukuran kotak.
(Merah di bawah) Di dalam ini, saya miliki divdengan position: relative. Satu-satunya penggunaan untuk ini adalah untuk level selanjutnya.
(Dengan warna biru di bawah) Akhirnya divsaya mengambil dari aliran dengan position: absolutetetapi saya ingin posisi relatif ke merah div(tidak ke halaman).

Saya ingin memiliki kotak biru dikeluarkan dari aliran dan berkembang di luar kotak hijau, tetapi diposisikan relatif terhadap kotak merah seperti pada:

Namun, dengan kode di bawah ini, saya dapat:

Dan menghapus position: relativepada kotak merah, sekarang kotak biru diizinkan keluar dari kotak hijau, tetapi tidak diposisikan lagi relatif terhadap kotak merah:

Apakah ada cara untuk:

Simpan overflow: hiddendi kotak hijau.
Sudahkah kotak biru membentang di luar kotak hijau dan diposisikan relatif terhadap kotak merah?

Sumber lengkap:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

Luaskan cuplikan

css overflow css-position

— avernet
sumber

44

+1 untuk pertanyaan dan kode sumber yang diformat dengan baik

— graphicdivine

Klarifikasi: Jadi Anda ingin kotak biru (bagian paling dalam) dapat meluap keluar dari kotak hijau (bagian paling luar) tetapi tetap meluap tersembunyi di kotak hijau? Jadi pada dasarnya, apakah overflow disembunyikan pada semua yang ada di kotak hijau KECUALI kotak biru, benarkah itu?

— Anthony

Anthony, ya, inilah tepatnya. Dan saya tidak peduli tentang apa yang terjadi pada kotak merah (# 2), yang hanya ada untuk mempengaruhi bagian kanan / atas pada kotak biru (# 3).

— avernet

2

+1 untuk menjelaskan pertanyaan yang menurut saya terlalu sulit untuk dijelaskan tetapi benar-benar menginginkan jawaban.

— Andrew Mao

position: fixedakan mengabaikan overflow:hiddenelemen yang mengandung.

— Kevin Beal

48

Trik yang berhasil adalah memposisikan kotak # 2 dengan position: absolutealih - alih position: relative. Kami biasanya meletakkan position: relativepada kotak luar (di sini kotak # 2) ketika kami ingin kotak dalam (di sini kotak # 3) dengan position: absoluteharus diposisikan relatif terhadap kotak luar. Tapi ingat: untuk kotak # 3 diposisikan relatif ke kotak # 2, kotak # 2 hanya perlu diposisikan. Dengan perubahan ini, kita mendapatkan:

Dan di sini adalah kode lengkap dengan perubahan ini:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

— avernet
sumber

5

Saya benar-benar menggunakan position: staticdan itu bekerja lebih baik untuk saya

— Jason

@ Jason, sangat menarik; jadi Anda mengatakan bahwa Anda menggunakan position: staticpada kotak # 2 bukan position: absolute.

— avernet

1

Bisakah Anda menguraikan mengapa absolutetidak klip tetapi relativelakukan?

— Andrew Mao

1

Solusi ini tidak akan berfungsi kecuali jika Anda membuat semuanya antara # 1 dan # 3 menjadi mutlak. Secara praktis, ini tidak mungkin.

— windmaomao

1

Ingin tahu apa tujuan untuk menjelaskan sesuatu yang visual dengan menggunakan warna seperti itu ...

— ed1nh0

5

Tidak ada solusi ajaib untuk menampilkan sesuatu di luar wadah tersembunyi yang meluap.

Efek serupa dapat dicapai dengan memiliki div posisi absolut yang cocok dengan ukuran induknya dengan menempatkannya di dalam wadah relatif Anda saat ini (div yang tidak ingin Anda klip harus berada di luar div ini):

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

Ingatlah bahwa jika Anda hanya perlu klip konten pada sumbu x (yang tampaknya menjadi kasus Anda, karena Anda hanya mengatur lebar div itu), Anda dapat menggunakan overflow-x: hidden.

— ragum
sumber

0

Saya tidak benar-benar melihat cara untuk melakukan apa adanya. Saya pikir Anda mungkin perlu menghapus overflow:hiddendari div # 1 dan menambahkan div lain dalam div # 1 (yaitu sebagai saudara kandung untuk div # 2) untuk memegang 'konten' Anda yang tidak ditentukan dan menambahkannya sebagai overflow:hiddengantinya. Saya tidak berpikir bahwa overflow bisa (atau seharusnya bisa) ditunggangi.

— grafisdivine
sumber

0

Jika ada konten lain yang tidak ditampilkan di luar-div (kotak hijau), mengapa tidak ada konten yang dibungkus di dalam div lain, sebut saja "content". Letakkan overflow disembunyikan di dalam-div baru ini, tetapi tetap melimpah terlihat di kotak hijau.

Satu-satunya hal yang perlu Anda lakukan adalah Anda harus dipusingkan untuk memastikan bahwa div konten tidak mengganggu posisi kotak merah, tetapi sepertinya Anda harus dapat memperbaikinya dengan sedikit sakit kepala.

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>

— Anthony
sumber