CSS: Jak mieć position: absolutny element div wewnątrz pozycji: względny element div nie może być przycięty przez przepełnienie: ukryty w kontenerze

143

Mam 3 poziomy div:

  • (Na zielono poniżej) Najwyższy poziom divz overflow: hidden. Dzieje się tak, ponieważ chcę, aby część zawartości (nie pokazana tutaj) wewnątrz tego pudełka została przycięta, jeśli przekracza rozmiar pudełka.
  • (Na czerwono poniżej) Wewnątrz mam divz position: relative. Jedynym zastosowaniem do tego jest następny poziom.
  • (Na niebiesko poniżej) W końcu divwyciągam z przepływu, position: absoluteale chcę, aby był ustawiony względem czerwonego div(nie do strony).

Chciałbym, aby niebieskie pole zostało wyjęte z przepływu i rozszerzyło się poza zielone pole, ale zostało ustawione względem czerwonego pola, jak w:

Jednak z poniższym kodem otrzymuję:

Po usunięciu position: relativeczerwonego pola, teraz niebieskie pudełko może wydostać się z zielonego pudełka, ale nie jest już ustawione względem czerwonego pudełka:

Czy jest sposób, aby:

  • Zachowaj overflow: hiddenna zielonym pudełku.
  • Czy niebieskie pole rozszerza się poza zielone pole i jest ustawione względem czerwonego pola?

Pełne źródło:

#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>
Rozwiń fragment

css overflow css-position avernet
źródło
44
+1 za dobrze sformatowane pytanie i kod źródłowy
graphicdivine
Wyjaśnienie: Więc chcesz, aby niebieskie pole (najbardziej wewnętrzny element DIV) mógł wylewać się z zielonego pola (najbardziej zewnętrzny element DIV), ale pozostawić przepełnienie ukryte na zielonym polu? Więc w zasadzie wszystkie przepełnienia są ukryte w zielonym pudełku Z WYJĄTKIEM niebieskiego, prawda?
Anthony
Anthony, tak, to jest dokładnie to. I nie obchodzi mnie, co stanie się z czerwonym pudełkiem (# 2), które jest po to, aby wpłynąć na górną / prawą stronę niebieskiego pudełka (# 3).
avernet
2
+1 za prawidłowe wyjaśnienie pytania, które moim zdaniem było zbyt trudne do wyjaśnienia, ale naprawdę chciałem odpowiedzieć.
Andrew Mao,
position: fixedzignoruje overflow:hiddenkażdy zawierający element.
Kevin Beal

Odpowiedzi:

48

Sztuczka, która działa, polega na umieszczeniu pola nr 2 za pomocą position: absolutezamiast position: relative. Zazwyczaj umieszczamy position: relativeliterę na pudełku zewnętrznym (tutaj ramka # 2), gdy chcemy, aby pudełko wewnętrzne (tutaj pudełko # 3) position: absolutebyło ustawione względem pudełka zewnętrznego. Ale pamiętaj: aby pudełko # 3 było ustawione względem pudełka # 2, pudełko # 2 musi być ustawione. Dzięki tej zmianie otrzymujemy:

A oto pełny kod z tą zmianą:

<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
źródło
5
faktycznie używałem position: statici to działało lepiej dla mnie
Jason
@Jason, bardzo interesujące; więc mówisz, że używasz position: staticw pudełku nr 2 zamiast position: absolute.
avernet
1
Czy możesz wyjaśnić, dlaczego absolutesię nie przycina, ale relativerobi?
Andrew Mao,
1
To rozwiązanie nie zadziała, chyba że wszystko między punktami 1 i 3 będzie absolutne. Praktycznie jest to niemożliwe.
windmaomao
1
Zastanawiam się, jaki jest cel wyjaśnienia czegoś tak wizualnego przy użyciu takich kolorów ...
ed1nh0
5

Nie ma magicznego rozwiązania polegającego na wyświetlaniu czegoś poza ukrytym pojemnikiem z przepełnieniem.

Podobny efekt można osiągnąć, ustawiając element div w pozycji bezwzględnej, który pasuje do rozmiaru jego elementu nadrzędnego, umieszczając go w bieżącym kontenerze względnym (element div, którego nie chcesz przycinać, powinien znajdować się poza tym elementem div):

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

Pamiętaj, że jeśli musisz przyciąć zawartość tylko na osi x (co wydaje się być Twoim przypadkiem, ponieważ ustawiłeś tylko szerokość elementu div), możesz użyć overflow-x: hidden.

imadło
źródło
0

Naprawdę nie widzę sposobu, aby zrobić to tak, jak jest. Myślę, że może być konieczne usunięcie elementu overflow:hiddendiv # 1 i dodanie kolejnego elementu div w ramach div # 1 (tj. Jako siostrzanego elementu div # 2), aby przechowywać nieokreśloną „zawartość” i overflow:hiddenzamiast tego dodać do niego. Nie sądzę, aby przepełnienie można było (lub powinno być) przezwyciężone.

graphicdivine
źródło
0

Jeśli inna zawartość nie jest wyświetlana wewnątrz zewnętrznego elementu div (zielone pole), dlaczego nie umieścić tej zawartości wewnątrz innego elementu div, nazwijmy to "content" . Ukryj przepełnienie w tym nowym wewnętrznym elemencie div, ale pozostawiaj przepełnienie widoczne na zielonym polu.

Jedyny haczyk polega na tym, że będziesz musiał wtedy bałaganić, aby upewnić się, że div zawartości nie koliduje z pozycjonowaniem czerwonego pola, ale wygląda na to, że powinieneś być w stanie to naprawić z niewielkim bólem głowy.

<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
źródło