Làm cách nào để xóa một phần tử khỏi luồng?

82

Tôi biết position: absolutesẽ bật một phần tử khỏi luồng và nó ngừng tương tác với các phần tử lân cận.

Có những cách nào khác để đạt được điều này?

css

— Hết lòng
nguồn

Ý bạn là xóa nó khỏi trang hoàn toàn hay chỉ ẩn nó đi? Ý bạn là gì khi "tương tác với hàng xóm của nó?"

— Jason Hall

bạn đang cố gắng đạt được điều gì?

— đau buồn

Tôi chỉ nghĩ có một cách để làm điều đó và tôi không thể nhớ được vì vậy tôi đã chuyển sang stackoverflow :) vị trí: tuyệt đối hoạt động nhưng tôi chỉ đang tự hỏi

— tận tâm

1

Câu trả lời hữu ích: stackoverflow.com/a/11917186/11298742

— ludovico

61

Không ai?

Ý tôi là, ngoài việc loại bỏ nó khỏi bố cục hoàn toàn display: none, tôi khá chắc chắn là như vậy.

Bạn có đang đối mặt với một tình huống cụ thể mà position: absolutekhông phải là một giải pháp khả thi?

— Matchu
nguồn

4

position: absolutegây ra sơn lại trên di chuyển, mà có hại cho hiệu suất trên điện thoại di động

— bafromca

7

Đây không phải là câu trả lời mà người dùng mong đợi nhận được khi đến đây vì tiêu đề có nội dung "xóa khỏi quy trình". display: noneloại bỏ hoàn toàn phần tử không chỉ khỏi dòng chảy.

— jstice4all

116

Một mẹo nhỏ khiến position:absolutetôi cảm thấy ngon miệng hơn là làm cha mẹ của nó position:relative. Khi đó đứa trẻ sẽ 'tuyệt đối' so với vị trí của cha mẹ.

jsFiddle

— Joe Flynn
nguồn

37

Một tùy chọn khác là đặt height: 0; overflow: visible;thành một phần tử, mặc dù nó sẽ không thực sự nằm ngoài luồng và do đó có thể phá vỡ sự sụp đổ của ký quỹ .

— người dùng
nguồn

2

@Jessica, sử dụng ::beforephần tử giả với vị trí tuyệt đối để mô phỏng nền.

— người dùng

4

Có display: none, nhưng tôi nghĩ điều đó có thể nhiều hơn một chút so với những gì bạn đang tìm kiếm.

— Greg Hewgill
nguồn

2

Nhưng ngay cả khi đó, nó vẫn ở "khu vực lân cận" .. vị trí tuyệt đối so với cơ thể là cách duy nhất để có toàn quyền kiểm soát vị trí của nó. Hãy nhớ rằng nếu nó gốc được khai báo là tương đối thì nguồn gốc tuyệt đối của nó là tương đối - bạn phải nối phần tử vào document.body hoặc phần tử được khai báo không tương đối trong trường hợp đó.

— Dan Heberden

4

Gì? Vị trí không liên quan nếu phần tử thậm chí không được hiển thị .

— Greg Hewgill

Trong Firefox, các thông báo xác thực cho các đầu vào display: nonexuất hiện ở một vị trí vô nghĩa (ở đầu màn hình, che các tab). Có vẻ như các phần tử chưa được hiển thị thực sự vô vị, ít nhất là trong trình duyệt đó.

— Brilliand

3

Làm nổi nó sẽ tổ chức lại luồng nhưng vị trí: tuyệt đối là cách duy nhất để loại bỏ hoàn toàn nó khỏi luồng của tài liệu.

— Sam Bowler
nguồn

3

position: fixed;cũng sẽ "bật" một phần tử ra khỏi quy trình, như bạn nói. :)

position: absolutephải kèm theo một chức vụ. ví dụtop: 1rem; left: 1rem

position: fixedtuy nhiên, sẽ đặt phần tử ở nơi nó thường xuất hiện theo dòng tài liệu, nhưng ngăn nó di chuyển sau đó. Nó cũng thiết lập hiệu quả chiều cao thành 0px (liên quan đến dom) để phần tử tiếp theo dịch chuyển lên trên nó.

Điều này có thể khá thú vị, vì bạn có thể đặt position: fixed; z-index: 1 (hoặc bất kỳ chỉ số z nào bạn cần) để nó "bật lên" trên phần tử tiếp theo.

Điều này đặc biệt hữu ích đối với các tiêu đề vị trí cố định, ví dụ như ở trên cùng khi bạn cuộn.

— Brian Lewis
nguồn

1

Tôi biết câu hỏi này đã có từ vài năm trước, nhưng những gì tôi nghĩ bạn đang cố gắng làm là đặt nó sao cho phần tử lớn, như hình ảnh không ảnh hưởng đến chiều cao của div?

Tôi vừa gặp phải một thứ tương tự, trong đó tôi muốn một hình ảnh làm tràn một div, nhưng tôi muốn nó nằm ở cuối một chuỗi văn bản, vì vậy tôi không biết nó sẽ ở đâu.

Một giải pháp mà tôi đã tìm ra là đặt chiều cao của margin-bottom: -element, vì vậy nếu hình ảnh cao 20px,

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

ví dụ.

Bằng cách đó, nó trôi ra bên ngoài div và ở bên cạnh từ cuối cùng trong chuỗi.

— Jeremy Miller
nguồn

0

Vì lợi ích của sự hoàn chỉnh: floatThuộc tính cũng loại bỏ một phần tử khỏi luồng HTML, ví dụ:

float: right

— air5
nguồn

-1

Hãy thử sử dụng cái này:

position: relative;
clear: both;

Tôi sử dụng nó khi tôi không thể sử dụng vị trí tuyệt đối, chẳng hạn như trong in ấn khi bạn sử dụng chỉ page-break-after: always;hoạt động tốt với position:relative.

— Massimo
nguồn