CSS

2012-06-22 21 views
27

'da bir öğeye göre bir öğe diğerine konumlandırma Dört div s değerini diğerine göre konumlandırmak istiyorum. Bir dikdörtgen div var ve köşelerinde 4 div s eklemek istiyorum. CSS'nin "position:relative" özniteliğine sahip olduğunu biliyorum, ancak bu, bu öğenin normal konumuna göre. div'ları normal konumlarına göre değil, başka bir öğeye (dikdörtgene) göre konumlandırmak istiyorum. Ne yapmalıyım?CSS

cevap

23

Ben öğesi içinde mutlak konumlandırma kullanarak öneririm.

Bu JSfiddle'ı biraz görselleştirmenize yardımcı olmak için oluşturdum.

http://jsfiddle.net/wUrdM/

+1

Ebeveyn öğesi ayrıntılarından emin değilseniz, ekran dinamik olduğunda bunu söyleyin. – abhi

+8

Sorunun cevabı gerçekten değil. –

+0

@ AndreasL.Agreed. Bence cevap basitçe yapamayacağın. Başka bir şey kullanarak yolunu kesmelisin. – CptAJ

28

position: absoluteposition: static değildir yakın yerleştirilmiş atası, yani en yakın ana göre koordinatlara göre eleman konumlandıracaktır.

Dört divinizin hedef div içine yerleştirilmesini sağlayın, hedef div position: relative verin ve diğerlerine position: absolute kullanın.

Yapısı buna HTML benzer:

<div id="container"> 
    <div class="top left"></div> 
    <div class="top right"></div> 
    <div class="bottom left"></div> 
    <div class="bottom right"></div> 
</div> 

Ve bu CSS çalışması gerekir:

#container { 
    position: relative; 
} 

#container > * { 
    position: absolute; 
} 

.left { 
    left: 0; 
} 

.right { 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

... 
+0

Eğer classnames kullanabilir ve her div tanesi 2, 'vb üst left',' alt right', vermelidir rağmen http://codepen.io/RikudoSennin/pen/2/1 –

+0

gör @Truth: Teşekkürler, kodu güncelledim. – Blender

+0

"en yakın konumlanmış ** atası ** ile göreli" değil? – SKG