PDA

Volledige versie bekijken : wat is eigenlijk het "containing block" in CSS ?

gbolssens
%Europe/Berlin %432 %2008, 10:23
Hi Allemaal.

Ik ben wat CSS aan het proberen leren en ik kom in een artikel de volgende paragraaf tegen:


If you specify the width for an absolutely positioned element, either explicitly via width in percents, or implicitly via left and right, the standard says that it should be computed relative to the containing block. Both Internet Explorer and Opera get this wrong, unfortunately, and use the width of the parent element as the basis for their computations. Gecko-based
browsers like Mozilla and Firefox behave correctly.


Ik dacht altijd dat het "containing block" hetzelfde was als het HTML element waar het in zit, maar blijkbaar heb ik het mis...

Kan iemand me het verschil uitleggen of een voorbeeld geven?

edit : ik heb net de definitie van de term "containing block" gelezen op http://www.w3.org/TR/REC-CSS2/visudet.html
maar ik snap 't nog steeds niet.


greetz,
GB
josko
%Europe/Berlin %491 %2008, 11:47
The containing block (called the initial containing block) in which the root element lives is chosen by the user agent.
Dit is dus eigenlijk de ruimte die de browser aan de website geeft.

Een absolute-positioned element is niet meer relatief aan zijn parent element,
maar aan de browser. Dit *zou* zowel voor top/left als voor zijn width/height relatief ten opzichte van de maximale ruimte zijn.

Maar Opera/IE doen dit dus fout, en doen het nog steeds ten opzichte van zijn parent element.

Is dit iets duidelijker?
gbolssens
%Europe/Berlin %599 %2008, 14:23
ik heb geprobeerd om in een voorbeeldje te gieten hoe ik denk dat het bedoeld is, en als ik dat bekijk in FF en in IE ziet dat er net hetzelfde uit, dus blijkbaar snap ik het nog steeds niet:



<body>
<style type="text/css">
#par1
{
background-color:#990000;
position:relative;
}

#par2
{
background-color:#009900;
position:absolute;
left:10%;
top:50%;
}

#par3
{
color:gray;
background-color:#000099;
position:absolute;
width:200px;
}

#par3_1
{
background-color:#0000ff;
position:absolute;
width:50%;
left:10px;
top:10px;
}
</style>


<div id="par1">
paragraph 1
</div>

<div id="par2">
paragraph 2
</div>

<div id="par3">
paragraph 3
<div id="par3_1">
paragraph 3.1
</div>
</div>
</body>



de div van paragraaf 3.1 zit IN de div van paragraaf 3.
Wat is de containing block dan voor div 3.1? is dat dan div 3 of body?


groetjes en alvast bedankt voor de reactie,
GB