2012-10-10 14 views
7

CSS ile tamamen yerleştirilmiş öğeleri temizlemenin bir yolu var mı? Sitenin her bir bölümünün (bölüm öğesi) tam olarak konumlandırılması gereken bir sayfa oluşturuyorum ve bu öğelerin altında içerik bulunan bir altbilgi uygulamak istiyorum.
Tam yüksekliğin hesaba katılıp katılmayacağını görmek için üstbilgi ve altbilgiyi göreceli olarak konumlandırmaya çalışıldı, ancak alt öğe hala bölüm öğelerinin altında "sıkışmış" durumda. Herhangi bir fikir?Kesinlikle yerleştirilmiş elemanları CSS ile temizleyin?

<header style="position: relative;"></header> 

<div id="content" style="position: relative;"> 

    <section id="a" style="position: absolute;"></section> 

    <section id="b" style="position: absolute;"></section> 

    <section id="c" style="position: absolute;"></section> 

    <section id="d" style="position: absolute;"></section> 

    <section id="e" style="position: absolute;"></section> 

</div> 

<footer style="position: relative;"></footer> 
+1

mutlak konumlandırılmış elemanlar yüzer elemanlar değildir, bu yüzden onları temizlemek gibi bir şey yoktur .. –

+0

Ayrıca bu wihtout JavaScript yapmanın hiçbir yolu olmadığını söyleyebilirim. – insertusernamehere

+0

Anladım. Ama "temiz" demek istediğimde neyin peşinde olduğunu anlıyor musun? Bir sonraki ebeveynin önceki içeriğin altına yerleştirilmesi için bir davranış. –

cevap

14

Kesinlikle konuma elemanlar düzeni artık parçasıdır - ebeveyn ürün ne kadar büyük kesinlikle bir konuma alt öğeleridir hiçbir fikrim yok. Altbilgiyi üst üste getirmediğinden emin olmak için "içeriğin" yüksekliğini kendiniz ayarlamanız gerekir.

2

Düzenler için kesinlikle konumlandırılmış öğeleri kullanmayın, çünkü bu öğeler normal akıştan kaldırılır ve çevrelerindeki öğeleri etkilemez. Ve diğer unsurlardan etkilenmezler.

Koşullar izin verdiğinde öğeleri bir kapsayıcıda taşımak için mutlak konumlandırmayı kullanın.

Süzülmüş öğeler için, clearfix adı verilen özel bir temizleme tekniğini kullanmanızı öneririm. Ben dini olarak kullanırım.

http://nicolasgallagher.com/micro-clearfix-hack/

http://jsfiddle.net/necolas/K538S/

+0

Düzenli bir yapıya nasıl yaklaşacağım konusunda çok aşina olduğum ama bu senaryo için bu unsurların kesinlikle konumlandırılmasına ihtiyacım var. Bunun yerine bir JS çözümü için gitmeye karar verdim. –

+0

@StaffanEstberg hala mümkün ise, js çözümünüzü gönderebilir misiniz? –

1

Had aynı soru konumlandırılmış tüm mutlak yapılmış, ancak yükseklik, bu elemanlar yüksekliği izlemek için yardıma değişikliği yaptılar yapmasıdır İlki duyarlı düzeni gelince, akraba olalım

.gallery3D-item { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.gallery3D-item:first-of-type { 
 
    position: relative; 
 
    display: inline-block; 
 
}

: bu durumda değişiklikler, bildirimi tüm elemanlar aynı yüksekliğe sahip