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 之上，但同时您希望这两个 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（父元素）时，您无法将 z-index 设置（您可以，但它不起作用）这些 div 中的图像，并期望它们将相互堆叠。

小提琴

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