Akıştan bir öğe nasıl kaldırılır?

83

position: absoluteAkıştan bir öğe çıkaracağını ve komşularıyla etkileşimini durduracağını biliyorum .

Bunu başarmanın başka yolları nelerdir?

css

— Sadık
kaynak

Onu sayfadan tamamen kaldırmak mı yoksa görünmez yapmak mı istiyorsunuz? Komşularıyla etkileşim kurmakla ne demek istiyorsun?

— Jason Hall

neyi başarmaya çalışıyorsun

— griegs

sadece bunu yapmanın bir yolu olduğunu düşündüm ve hatırlayamadım, bu yüzden stackoverflow'a döndüm :) pozisyon: mutlak çalışıyor ama sadece merak ediyordum

— Adanmış

1

Faydalı cevap: stackoverflow.com/a/11917186/11298742

— ludovico

63

Yok?

Demek istediğim, onu tamamen düzenden çıkarmak dışında, bu kadar display: noneeminim.

position: absoluteUygulanabilir bir çözüm olmayan belirli bir durumla mı karşı karşıyasınız?

— Matchu
kaynak

4

position: absolutekaydırma sırasında yeniden boyamaya neden oluyor, bu da mobil cihazlarda performans açısından kötü

— bafromca

7

Bu, bir kullanıcının buraya geldiğinde beklediği yanıt değil, çünkü başlık "akıştan kaldır". display: noneelemanı sadece akıştan tamamen kaldırmaz.

— jstice4all

118

position:absoluteBenim için daha lezzetli kılan bir numara , ebeveynini yapmaktır position:relative. O zaman çocuk, ebeveynin konumuna göre 'mutlak' olacaktır.

jsFiddle

— Joe Flynn
kaynak

37

Diğer bir seçenek de height: 0; overflow: visible;, akışın dışında olmayacak ve bu nedenle marj daralmasını bozabilecek olsa da bir öğeye ayarlamaktır .

— kullanıcı
kaynak

2

@Jessica, ::beforearka planı taklit etmek için mutlak konumlandırmalı sözde öğe kullanın .

— kullanıcı

4

Var display: none, ama bence bu aradığınızdan biraz daha fazlası olabilir.

— Greg Hewgill
kaynak

2

Ama o zaman bile, hala "mahallede". Vücuda göre mutlak konum, konumu üzerinde tam kontrole sahip olmanın tek yoludur. Ebeveynin göreceli olarak bildirilmesi durumunda, mutlak kökeninin buna göre olduğunu unutmayın - bu durumda, öğeyi document.body'ye veya göreceli olmayan bildirilen öğeye eklemeniz gerekir.

— Dan Heberden

4

Ne? Öğe görüntülenmese bile konum alakalı değildir .

— Greg Hewgill

Firefox'ta, girişler için doğrulama mesajları display: noneanlamsız bir konumda (ekranın üst kısmında sekmeleri örten) görünür. Görünüşe göre, görüntülenmemiş öğeler, en azından o tarayıcıda, gerçekten konumsuz.

— Brilliand

4

position: fixed;sizin de söylediğiniz gibi, bir öğeyi akıştan "çıkarır". :)

position: absolutebir pozisyon eşlik etmelidir. Örneğintop: 1rem; left: 1rem

position: fixedancak, öğeyi belge akışına göre normalde görüneceği yere yerleştirecek, ancak bundan sonra hareket etmesini engelleyecektir. Ayrıca, yüksekliği 0px'e (dom ile ilgili olarak) etkili bir şekilde ayarlar, böylece bir sonraki öğe onun üzerine geçer.

Bu oldukça havalı olabilir, çünkü bir position: fixed; z-index: 1sonraki elemanın üzerine "çıkacak" şekilde ayarlayabilir (veya ihtiyacınız olan z-endeksini).

Bu, örneğin, kaydırdığınızda üstte kalan sabit konumlu başlıklar için özellikle kullanışlıdır.

— Brian Lewis
kaynak

3

Yüzer, akışı yeniden düzenler, ancak konum: mutlak, onu belge akışından tamamen çıkarmanın tek yoludur.

— Sam Bowler
kaynak

2

Bu sorunun birkaç yıllık olduğunu biliyorum, ama yapmaya çalıştığınızı düşündüğüm şey, bir görüntü gibi büyük bir öğenin bir div'in yüksekliğini engellemediği bir yerde elde etmek mi?

Benzer bir şeyle karşılaştım, burada bir görüntünün bir div taşmasını istedim, ancak bunun bir metin dizisinin sonunda olmasını istedim, bu yüzden nerede olacağını bilmiyordum.

Bulduğum bir çözüm, marj-bottom: -element'in yüksekliğini koymaktı, bu yüzden görüntü 20px yükseklik ise,

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

Örneğin.

Bu şekilde div'in dışında süzülüyor ve dizedeki son kelimenin yanında kalıyordu.

— Jeremy Miller
kaynak

1

Tamlık adına: floatÖzellik, HTML akışından bir öğeyi de kaldırır, örn.

float: right

— air5
kaynak

-1

Bunu kullanmayı deneyin:

position: relative;
clear: both;

Mutlak pozisyonu kullanamadığımda kullanıyorum, örneğin baskıda kullandığınızda page-break-after: always;sadece iyi çalışıyor position:relative.

— Massimo
kaynak