Having problems with absolute positioning

[Ben502]

THis may be yet another simpe one that i am doing something goofy on...but here we go

i have a dive set to relative positioning. inside that i have another nested div acting as a heading which is also set to relative so that i can place two different images using absolute positioning...this is working great. However, i also want to place an image in the parent div using absolute so that it always shows up in the bottom left corner of the div. However, when i try to set the image to bottom 0, left 0 it shows up above the parent div.

i have tried removing the relative setting off of the heading and that did not seem to help. Here is my css:


#contentcontain #content .fpleftcol {
float: left;
width: 445px;
background-image: url(../images/whitetransbackground.png);
background-repeat: repeat-y;
-moz-box-shadow: 4px 4px 5px #666666;
-webkit-box-shadow: 4px 4px 5px #666666;
box-shadow: 4px 4px 5px #666666;
top: 10px;
margin-top: 10px;
position: relative;
}
#contentcontain #content .fpleftcol .greenheading {
background-image: url(../images/greengradient.png);
background-repeat: repeat-x;
background-color: #BBD406;
margin: 0px;
padding: 0px;
position: relative;
}
#contentcontain #content .greenheading .starleft {
left: 3px;
display: inline;
margin: 0px;
padding: 0px;
top: 2px;
position: absolute;
}
#contentcontain #content .greenheading .starright {
padding: 0px;
position: absolute;
margin: 0px;
width: 66px;
left: 372px;
top: 14px;
}
#contentcontain #content .fpleftcol img {
position: absolute;
left: 0px;
bottom: 0px;
display: block;
}


as always. Thank you very much!

[alt131]

Hi Ben, and good to see you back,

I think time to try the recommendations (rather than bourbon ;) ) From your description it sounds as if two sections will help understand what is happening here: The first is how absolute elements are positioned - try 9.3.1 Choosing a positioning scheme: 'position' property [w3.org] - and note that elements are positioned according to their containing block. So the first step is to identify the containing block.

Also scroll down to 9.7 Relationships between 'display', 'position', and 'float' and note point #2 - if an element has position:absolute, the display will usually compute to block, so setting display is redundant, and display:inline is over-ridden. (I did some tests a while ago and it seems that in some complex scenarios browsers do not always conform, but this works for general use.)

The second is stacking - scroll down to 9.9.1 Specifying the stack level: the 'z-index' property.

nested div acting as a heading

This also concerns me - why not use a heading instead?

[Ben502]

Thank you for the response!

So the first step is to identify the containing block.

The containing block on this one is:
.fpleftcol
which i have set to relative in hopes that it would contain the items i set to absolute. my hope was, by setting the image that i am using inside of the relatively positioned .fpleftcol to absolute and setting the position of the image to bottom 0 left 0 it would sit in the bottom left corner of that container.

if an element has position:absolute, the display will usually compute to block, so setting display is redundant, and display:inline is over-ridden.

this is what i thought, but since i have having problems making it work i thought i would give setting the image as block a try for giggles. That can be removed

nested div acting as a heading

This also concerns me - why not use a heading instead?

i guess i should clarify this one. i am still using headings...by nested div acting as a heading i mean a heading background color/gradient There are <h2> tags inside the div but i am also positioning two images with absolute and using the div as a container

[alt131]

However, i also want to place an image in the parent div using absolute so that it always shows up in the bottom left corner of the div. However, when i try to set the image to bottom 0, left 0 it shows up above the parent div.

When you say above, did you mean higher in the stack order (z-index), or "above" as in closer to the top of the page (y-axis)?

Also maybe a short html snippet - when using the provided css with the following html all elements display as expected/desired - including the image being positioned at bottom left.

<div id="contentcontain">
<div id="content">
<div class="fpleftcol">
<img src="images/myimage.jpg" alt="#" border="0" >
<div class="greenheading">greenheading
<div class="starleft">starleft</div>
<div class="starright">starright</div>
</div><!--greenheading-->
</div><!--fpleftcol-->
</div><!--content-->
</div><!--contentcontain-->

Note that if you meant the img in div.fpleftcol is "above" the parent (div.fpleftcol) as in the image is "over the top" of the background image set on fpleftcol, that is correct per the stack oder in section 9.9.1.