css - L字型のコンテナで画像を重ねる？

Question

私はここで少し探していましたが、これが私ができたことです。私はウェブデザインに関係することには何でも賛成なので、あまり厳しくしないでください. :P

html

<div class="container-3">
  <div class="top"><img class="img1" src="http://dummyimage.com/200/ccc/000.png&text=image+1" />
  </div>
  <div class="bottom"><img  src="http://dummyimage.com/200/ccc/000.png&text=image+5" width="202" height="210" class="img5" /></div>
</div>

CSS

.img1{top:0px; left:0px; z-index:1;opacity:.5}

.img2{top:10px; right:110px; z-index:2;opacity:.5}

.container-3{    
  position:absolute; 
}

.top{   
  width: 200px;  
  height:200px;
  background:red;
  border:blue solid 2px;
  border-bottom:none;
  position:relative;
  z-index:4;
} 

.bottom{
  z-index:2;
  width: 600px;
  height: 300px;
  position:absolute;
  top:50px;
  left:0;
  border: blue solid 2px;
  background:red;
}

今すぐ画像を取得しましたが（と思います）、正しい位置に配置する方法がわかりません。私は最終結果がこのように見えることを望みます

html:

<p>Etvab luxury estates är en webportal för den kräsne bostadsköparen.

Här har vi samlat ett representativt urval av de mest

exklusiva bostäderna på Spaniens södra kust.

Bostäder med unika lägen – havsnära eller örnnästen.

Bostäder med förfinad design.

Bostäder med vyer som är ”breathtaking”.

Bostäder med luft och ytor som andas välbefinnande.

Bostäder som har allti modern utrustning och senaste teknologi.

Vi har medvetet lagt ribban högt, för att kittla fantasin, ge en svindlande

resa i tid och rum och visa det bästa av spansk modern arkitektur.

Vi har i första hand valt bostäder med lägen och kvalitet

som är i absolut topskikt.

Vi har inte tittat på status i områden

då vi bedömer att det inte avgör bostadens värde och attraktion.

Vår ambition är att förnya dessa sidor regelbundet, till nöje

och nytta för den som söker inspiration till ett husköp

med högsta kvalitet och läge.

Men även för den som njuter av design och vackra miljöer

- på avstånd.</div>     
<p>&nbsp;<br>
</p>


 <style>
    .qs_input { height:40px; padding: 0px 0px 0px 8px; background: #f3f3f3; border: 1px solid #dfdfdf; border-bottom: 2px solid #d7d6d6; font-family: 'Helvetica Neue', sans-serif; font-size: 1.0 em;}
    .the_table {font-family: 'Helvetica Neue', sans-serif; font-size: 0.8em;}
    .fastighet { padding:5px;}
    .inne { padding:8px 0px 8px 8px;  height:15px;}
</style>
 <div id='qsResale' class='qs_body' style='width:50%; float:right; margin-left: 15px; padding:0px; margin: 0px;'>
<form name='qsFormResale' id='qsFormResale' method='post' action='search.php'>
<table class="the_table" style='width:98%; float:left;'>
    <tr><td class='qs_label' style='width:98%;'><h7>Typ av fastighet</h7></td></tr>
    <tr><td>
<select class='qs_input fastighet' name='Type' id='Type' style='width:90%;'>
<option class='qs_input' value='No Preference'></option>
<option class='qs_input' value='S'>Studio</option>
<option class='qs_input' value='A'>Lägenhet</option>
<option class='qs_input' value='T'>Radhus</option>
<option class='qs_input' value='V'>Villa</option>
<option class='qs_input' value='P'>Tomt</option>
<option class='qs_input' value='C'>Kommersiella</option>
<option class='qs_input' value='AS'>Lägenhet & Studio</option>
<option class='qs_input' value='AT'>Lägenhet & radhus</option>
<option class='qs_input' value='AV'>Lägenhet & villa</option>
<option class='qs_input' value='TV'>Radhus & villa</option>
</select>
        </td>
    </tr>


        <tr><td class='qs_label' style='vertical-align:top;'><h7>Kust</h7></td></tr>
        <tr><td>
            <select class='qs_input fastighet' name="Area" id="Area" onchange="cambia(this, document.qsFormResale.Location);" style='width:90%;'> 
            <option value='Costa de la Luz'>Costa de la Luz</option>
            <option value='Costa del Sol'>Costa del Sol</option>
            <option value='Costa del Sol East'>Costa del Sol East</option>
            <option value='Granada (Costa Tropical)'>Granada (Costa Tropical)</option>
            <option value='Almería (Costa Almería)'>Almería (Costa Almería)</option>
            <option value='Murcia (Costa Calida)'>Murcia (Costa Calida)</option>
            <option value='Alicante (Costa Blanca)'>Alicante (Costa Blanca)</option>
            <option value='Costa Azahar'>Costa Azahar</option>
            <option value='Costa Brava'>Costa Brava</option>
            <option value='Costa Dorada'>Costa Dorada</option>
            <option value='Ibiza'>Ibiza</option>
            <option value='Cordoba'>Cordoba</option>
            <option value='Tenerife'>Tenerife</option>
            <option value='Mallorca'>Mallorca</option>

            </select>

            </td>
        </tr>



    <tr>
      <td class='qs_label' style='vertical-align:top;'><h7>Område</h7></td></tr>
    <tr><td>
        <select class='qs_input' size='5' style="height:150px; width:395px;" name='Location' id='Location' multiple='multiple' style='width:90%;'>
        <option class='qs_input inne' value='No Preference'>Ingen Preferens</option>
        <option class='qs_input inne' value='Ayamonte'>Ayamonte</option>
        <option class='qs_input inne' value='Huelva'>Huelva</option>
        <option class='qs_input inne' value='Sanlucar de Barrameda'>Sanlucar de Barrameda</option>
        <option class='qs_input inne' value='Tarifa'>Tarifa</option>
        <option class='qs_input inne' value='Jimena de la Frontera'>Jimena de la Frontera</option>
        <option class='qs_input inne' value='San Pablo de Buceite'>San Pablo de Buceite</option>
        <option class='qs_input inne' value='Jerez de la Frontera'>Jerez de la Frontera</option>
        <option class='qs_input inne' value='Cadiz'>Cádiz</option>
        <option class='qs_input inne' value='Olvera'>Olvera</option>
        </select></td>
    </tr>

    <tr><td class='qs_label'><h7>Sovrum</h7></td></tr>
    <tr><td>
        <select size='1' class='qs_input fastighet' name='Beds' id='Beds' style='width:90%;'>
<option class='qs_input' value='No Preference'>Ingen Preferens</option>
<option class='qs_input' value='1'>1 Bädd</option>
<option class='qs_input' value='1x'>1 Bädd eller fler</option>
<option class='qs_input' value='2'>2 Bäddar</option>
<option class='qs_input' value='2x'>2 Bäddar eller fler</option>
<option class='qs_input' value='3'>3 Bäddar</option>
<option class='qs_input' value='3x'>3 Bäddar eller fler</option>
<option class='qs_input' value='4'>4 Bäddar</option>
<option class='qs_input' value='4x'>4 Bäddar eller fler</option>
<option class='qs_input' value='5'>5 Bäddar</option>
<option class='qs_input' value='5x'>5 Bäddar eller fler</option>
<option class='qs_input' value='6'>6 Bäddar</option>
<option class='qs_input' value='6x'>6 Bäddar eller fler</option>
<option class='qs_input' value='7'>7 Bäddar</option>
<option class='qs_input' value='7x'>7 Bäddar eller fler</option>
<option class='qs_input' value='8'>8 Bäddar</option>
<option class='qs_input' value='8x'>8 Bäddar eller fler</option>
<option class='qs_input' value='9'>9 Bäddar</option>
<option class='qs_input' value='9x'>9 Bäddar eller fler</option>
        </select></td>
    </tr>

    <tr><td class='qs_label'><h7>Pris från</h7></td></tr>
    <tr><td><p>
      <input type='text' class='qs_input' id='PriceMin' name='PriceMin' style='width:80%;' value='0' maxlength='8' onChange='return f_checkNumber(this,0,0);'>
          &nbsp;<span class='qs_text'>&euro;</span></p></td></tr>

    <tr>
      <td class='qs_label'><h7>Pris upp till</h7></td></tr>
    <tr><td><input type='text' class='qs_input' id='PriceMax' name='PriceMax' style='width:80%;' value='0' maxlength='8' onChange='return f_checkNumber(this,0,0);'>&nbsp;<span class='qs_text'>&euro;</span></td></tr>

    <tr>
      <td class='qs_label'><h7>Referens nr</h7></td></tr>
    <tr><td style='padding-right:5%;'><input type='text' class='qs_input' id='RefNum' name='RefNum' value='' maxlength='12'></td></tr>

    <tr><td style='padding-top:10px;'><input type='submit' input type='button' class="button-5" value="Sök"></td></tr>
</table>

<input type='hidden' name='P1' id='P1' value='ETvabResales'>
<input type='hidden' name='P2' id='P2' value='R'>
<input type='hidden' name='P3' id='P3' value='ALL'>
<input type='hidden' name='QS' id='QS' value='RESALE'>
<input type='hidden' name='Country' id='Country' value='Spain'>
<input type='hidden' name='RentalType' id='RentalType' value=''>
<input type='hidden' name='RentalDateFrom' id='RentalDateFrom' value='06-02-2013'>
<input type='hidden' name='RentalDateTo' id='RentalDateTo' value='06-02-2013'>
<input type='hidden' name='Language' id='Language' value='8'>
<input type='hidden' name='CustomArea' id='CustomArea' value=''>
</form>         
            </div>


        </div>

     <div class="clear"></div>  


 </section>

score 0 · Accepted Answer

一番上の div を一番下の div の上に積み重ねたいと思っているのですが、同時に、これらの 2 つの div 内の画像に、互いに依存する独自のスタック順序を持たせたいですか?

この中で

<div class="container-3">
  <div class="top"><img class="img1" src="http://dummyimage.com/200/ccc/000.png&text=image+1" />
  </div>
  <div class="bottom"><img  src="http://dummyimage.com/200/ccc/000.png&text=image+5" width="202" height="210" class="img2" /></div>
</div>

z-index を div (親要素) に設定すると、それらの div 内の画像に z-index を設定することはできません (設定できますが、機能しません)。

フィドル

score 0 · Accepted Answer

いくつかのこと: 画像の場合、とを使用するtopにleftは、が必要position:absoluteです。position:relative含む div に指定する必要があるため、次の場所に移動しました。

.container-3{    
  position:relative; 
}

そしてposition:absolute.top に渡されます

これにより、両方の画像と両方のテキスト領域を個別に積み重ねることができます。配置はすべてに対して相対的であったため、一部の位置を調整する必要が.container-3あり、一部の z-index 値を調整する必要がありました。

結果はhttp://jsfiddle.net/rPAPz/143/で確認できます。

これがあなたが探していたものであることを願っています。

css - L字型のコンテナで画像を重ねる？

2 に答える 2

Related

Reference