Jak usunąć element z przepływu?

83

Wiem, position: absoluteże wyskoczy element z przepływu i przestanie wchodzić w interakcje z sąsiadami.

Jakie są inne sposoby, aby to osiągnąć?

css

— Oddany
źródło

Masz na myśli całkowite usunięcie go ze strony, czy po prostu uczynienie go niewidocznym? Co rozumiesz przez „interakcję z sąsiadami”?

— Jason Hall,

Co starasz się osiągnąć?

— griegs,

po prostu pomyślałem, że jest na to sposób i nie mogłem sobie przypomnieć, więc przeszedłem do stackoverflow :) pozycja: absolutna działa, ale tylko się zastanawiałem

— Devoted

1

Przydatna odpowiedź: stackoverflow.com/a/11917186/11298742

— ludovico

63

Żaden?

To znaczy, poza całkowitym usunięciem go z układu display: none, jestem prawie pewien, że to wszystko.

Czy masz do czynienia z konkretną sytuacją, która position: absolutenie jest realnym rozwiązaniem?

— Matchu
źródło

4

position: absolutepowoduje przemalowanie podczas przewijania, co jest niekorzystne dla wydajności na urządzeniach mobilnych

— bafromca,

7

Nie jest to odpowiedź, której użytkownik spodziewa się, gdy przychodzi tutaj, ponieważ tytuł brzmi „usuń z przepływu”. display: nonecałkowicie usuwa element nie tylko z przepływu.

— jstice4all

118

Jedną z sztuczek, która sprawia, że jest position:absolutedla mnie przyjemniejsza, jest uczynienie jej rodzica position:relative. Wtedy dziecko będzie „absolutne” w stosunku do pozycji rodzica.

jsFiddle

— Joe Flynn
źródło

37

Inną opcją jest ustawienie height: 0; overflow: visible;elementu, który tak naprawdę nie będzie znajdował się poza przepływem i dlatego może przerwać zwijanie marginesów .

— użytkownik
źródło

2

@Jessica, użyj ::beforepseudoelementu z pozycjonowaniem bezwzględnym, aby emulować tło.

— użytkownik

4

Jest display: none, ale myślę, że to może być trochę więcej niż to, czego szukasz.

— Greg Hewgill
źródło

2

Ale nawet wtedy wciąż jest „w sąsiedztwie”… absolutna pozycja względem ciała jest jedynym sposobem na pełną kontrolę nad jego pozycją. Pamiętaj, że jeśli jego rodzic jest zadeklarowany jako względny, jego absolutne pochodzenie jest względne - w takim przypadku musisz dołączyć element do dokumentu document.body lub nierelatywny zadeklarowany element.

— Dan Heberden

4

Co? Pozycja nie ma znaczenia, jeśli element nie jest nawet wyświetlany .

— Greg Hewgill

W przeglądarce Firefox komunikaty weryfikacyjne dotyczące danych wejściowych display: nonepojawiają się w bezsensownym miejscu (u góry ekranu, zakrywając karty). Wygląda na to, że niewidoczne elementy są naprawdę pozbawione pozycji, przynajmniej w tej przeglądarce.

— Brilliand

4

position: fixed;jak powiesz, „wyskoczy” element z przepływu. :)

position: absolutemusi towarzyszyć stanowisko. na przykładtop: 1rem; left: 1rem

position: fixedjednak umieści element w miejscu, w którym normalnie pojawiałby się zgodnie z obiegiem dokumentów, ale zapobiegnie jego przemieszczaniu się po tym. Skutecznie ustawia również wysokość na 0px (w odniesieniu do dom), tak aby następny element przesuwał się nad nim.

To może być całkiem fajne, ponieważ możesz ustawić position: fixed; z-index: 1(lub jakikolwiek inny potrzebny indeks Z) tak, aby „pojawiał się” nad następnym elementem.

Jest to szczególnie przydatne na przykład w przypadku nagłówków o stałej pozycji, które pozostają na górze podczas przewijania.

— Brian Lewis
źródło

3

Swobodna zmiana spowoduje reorganizację przepływu, ale pozycja: bezwzględna to jedyny sposób na całkowite usunięcie go z przepływu dokumentu.

— Sam Bowler
źródło

2

Wiem, że to pytanie ma kilka lat, ale myślę, że próbujesz je zdobyć, więc gdzie duży element, taki jak obraz, nie koliduje z wysokością div?

Właśnie natknąłem się na coś podobnego, w którym chciałem, aby obraz przepełnił element div, ale chciałem, aby znajdował się na końcu ciągu tekstu, więc nie wiedziałem, gdzie to się skończy.

Rozwiązaniem, które wymyśliłem, było umieszczenie margin-bottom: -element wysokości, więc jeśli obraz ma wysokość 20 pikseli,

margin-bottom: -20px; vertical-align: top;

na przykład.

W ten sposób unosił się nad zewnętrzną częścią elementu div i pozostawał obok ostatniego słowa w ciągu.

— Jeremy Miller
źródło

1

W trosce o kompletność: floatWłaściwość usuwa również element z przepływu HTML, np

float: right

— powietrze5
źródło

-1

Spróbuj tego użyć:

position: relative;
clear: both;

Używam go, gdy nie mogę użyć pozycji bezwzględnej, na przykład w druku, gdy używasz page-break-after: always;działa dobrze tylko z position:relative.

— Massimo
źródło