CODEWITHSUNDEEP
htmlcsscss-position
David Crowe
David Crowe

Reputation: 143

Element does not show outside the bounds of its containing element

I have a div (relatively positioned) containing data, and want a series of buttons sitting on top of the box. These buttons are just div's with absolute positioning. However, if I position them outside the containing div they do not display. They display fine if the positioning is positive (inside the main div). Is it possible to have an absolute positioned div (or other element, I'm not fussy) show outside the bounds of its container? If so, how?

The critical portion of the CSS of one of the 'buttons' is: "position: absolute; right: -3px; width: 20px; top: -27px;"

The main rectangle has the following CSS type (visibility/display are turned on by javascript when the time is right):

.ob{
    visibility:hidden; 
    display:none;
    position:relative;
    left:1;
    top:1;
    text-align: left;
    vertical-align: top;
    padding-top: 12px;
    margin-bottom: 20px;
    padding-left:2px; padding-right:2px;
    border-collapse: collapse;
    overflow: auto;
}

An example is defined with the following PHP:

echo "  <div id='$portalid.ButtonDelete' 
style='border:2px solid ".$onefield["Color.Border"]."; text-align: center; color: ".$onefield["Color.Text"]."; background: ".$onefield["Color.Fill"]."; 
position: absolute; right: ".$ButtonRight."px; width: 20px; top: -2px; 
font-family: Sans-Serif; font-weight: bold; 
height: 20px; padding-top: 2px; 
z-index:1; cursor:pointer;' title='Delete selected ".$onefield["Display"]."' onclick='alert(\"Not implemented\");'>
X
</div>";

which translates into:

<div id='Delete'
style='border:2px solid red; text-align: center; color: White; background: Pink;
position: absolute;  right: -2px; width: 20px; top: -24px;
font-family: Sans-Serif; font-weight: bold;
height: 20px; padding-top: 2px; z-index:1; cursor:pointer;'
title='Delete selected records' onclick='alert(\"Not implemented\");'>
X
</div>";

Upvotes: 1

Views: 1060

Answers (1)

David Crowe
David Crowe

Reputation: 143

I solved the problem by changing "overflow:auto" to "overflow:visible" in the ".ob" CSS for the main rectangle. I'm a bit confused because the four 'buttons' are now sitting nicely on top of the main rectangle (which I want) but when I specify a fixed height for the rectangle the content still scrolls (which I also want, but doesn't seem to fit the "overflow:visible" specification. So it's working, but I don't entirely understand why.

Upvotes: 1

Related Questions