CSS'de üst üste binen öğeler

Question

İki öğeyi CSS'de nasıl örtebilirim, ör.

<div>Content 1</div> 
<div>Content 2</div> 

İki içeriğini istiyorum İçerik 1 ile aynı sol üst köşesinde başlayan görüntülenir 2 İçeriğin çakışmasına, (bunlar herhangi bir şey olabilir) ve üst üste görünür. İçerik 1, belgenin normal akışında başlamalı ve ekranda sabit bir konumda olmamalıdır.

Bu mümkün mü?

sayesinde

AJ

Answer 1

kolay yolu her iki unsurları position:absolute kullanmaktır. Sen sayfaya kesinlikle konumunu can veya position:relative

<div id="container" style="position:relative;"> 
    <div id="div1" style="position:absolute; top:0; left:0;"></div> 
    <div id="div2" style="position:absolute; top:0; left:0;"></div> 
</div> 

Answer 2

için kapsayıcı div ayarlayarak bir kap div kesinlikle pozisyon göreceli seni göreli konumlandırma kullanarak paçayı ve sonra üst/sol ayarlayabilirsiniz düşünebiliriz İkinci DIV'nin konumlandırılması istenen konuma gelene kadar.

Answer 3

Öğelerinizi örtüştürmek için göreli konumlamayı kullanabilirsiniz. Bununla birlikte, bunlar normal olarak kaplar alan hala elemanı için ayrılacaktır:

Yukarıdaki örnekte

<div style="background-color:#f00;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 
<div style="background-color:#0f0;width:200px;height:100px;position:relative;top:-50px;left:50px;"> 
    RELATIVE POSITIONED 
</div> 
<div style="background-color:#00f;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 

, iki 'STANDART KONUMLANDIRILMIŞ' elemanları arasındaki boşluk bir blok olacaktır. Bu sebepten dolayı 'RELATİF POZİSYONLU' elemanın alanı saklıdır. Eğer üstünde olan unsurlar kontrol edebilirsiniz Nihayet

<div style="background-color:#f00;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 
<div style="background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;"> 
    ABSOLUTE POSITIONED 
</div> 
<div style="background-color:#00f;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 

: Mutlak konumlandırma kullanıyorsanız, eleman üst üste aslında böylece

, senin elemanlar belgenizi bozmadan, herhangi uzay saklıdır olmaz Diğerleri z-endeksini kullanarak:

<div style="z-index:10;background-color:#f00;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 
<div style="z-index:5;background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;"> 
    ABSOLUTE POSITIONED 
</div> 
<div style="z-index:0;background-color:#00f;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div>