Databases
StackOverflow2013
Postsdbo
POCSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
    primarykey
    data
    text
    <p>I have 3 levels of <code>div</code>:</p> <ul> <li><em>(In green below)</em> A top level <code>div</code> with <code>overflow: hidden</code>. This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box.</li> <li><em>(In red below)</em> Inside this, I have <code>div</code> with <code>position: relative</code>. The only use for this is for the next level.</li> <li><em>(In blue below)</em> Finally a <code>div</code> I take out of the flow with <code>position: absolute</code> but that I want positioned relative to the red <code>div</code> (not to the page).</li> </ul> <p>I'd like to have the blue box be taken out of the flow and expand beyond the green box, but be positioned relative to the red box as in:</p> <p><img src="https://i.stack.imgur.com/iaky5.png" alt=""></p> <p>However, with the code below, I get:</p> <p><img src="https://i.stack.imgur.com/heZOW.png" alt=""></p> <p>And removing the <code>position: relative</code> on the red box, now the blue box is allowed to get out of the green box, but is not positioned anymore relative to the red box:</p> <p><img src="https://i.stack.imgur.com/hkrpU.png" alt=""></p> <p>Is there a way to:</p> <ul> <li>Keep the <code>overflow: hidden</code> on the green box.</li> <li>Have the blue box expand beyond the green box and be positioned relative to red box?</li> </ul> <p>The full source, with inline CSS for the sake of testing:</p> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;body&gt; &lt;br/&gt;&lt;br/&gt;&lt;br/&gt; &lt;div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px"&gt; &lt;div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px"&gt; &lt;div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USavernet
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
      1. USStéphan Kochen
      1. VTFavorite
    1. CO+1 for well formatted question and source code
      singulars
      1. POCSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
      1. USgraphicdivine
    2. COClarification: So you want the blue box (the inner-most div) to be able to overflow out of the green box (the outer-most div) but keep overflow hidden on the green box? So basically, have overflow hidden on everything in the green box EXCEPT the blue box, is that right?
      singulars
      1. POCSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
      1. USAnthony
    3. COAnthony, yes, this is exactly it. And I don't care about what happens to the red box (#2), which is just there to influence the top/right on the blue box (#3).
      singulars
      1. POCSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
      1. USavernet
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload