Overlap images in an L-shaped container?
I searched a bit here and this is what I was able to do. I'm green for anything web design, so don't be too harsh.: P
http://jsfiddle.net/rPAPz/141/
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;
}
I have images right now (I think) but I don't know how to position it correctly. I would like the end result to look like this
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> <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);'>
<span class='qs_text'>€</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);'> <span class='qs_text'>€</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>
+3
source to share
2 answers
If I understand that you want the top div to be positioned above the bottom div, but at the same time, you want the images inside those two divs to have their own stack order depending on each other?
In that
<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>
When you set the z-index on divs (parent elements), you cannot set (you can, but it won't work) the z-index for the images in those divs and expect them to stack into each other.
0
source to share
A couple of things: for images use top
and left
, they should have position:absolute
. position:relative
should be assigned to the containing div, so I moved it to:
.container-3{
position:relative;
}
and then given position:absolute
to.top
This allows you to isolate both images and both areas of text independently of each other. Some of the positioning needed to be adjusted as it related to .container-3
, and some of the z-index values ââneeded to be adjusted.
You can see the results: http://jsfiddle.net/rPAPz/143/
Hope this is what you were looking for.
0
source to share