Member Avatar for yaragalla_mural

The following is my html code. This code contains one absolute div. The div with id "mydiv" is an absolute div. Only half of the absolute div is being displayed. I want the div on top of all elements and fully displayed. What could be the problem? Even after specifying z index to 20,000 it is stillbeing half displayed.
Thanks in advance.

<html>
<head>

</head>
<body>
    <div  style="overflow:hidden;margin-top:22px;position:relative;">
                        <div style="float:left;height:100px;" class="label libLabel" >
                            jhjhjhhjhlhlll                      
                        </div>
                        <div style="float:left;position:relative;">
                            <div>
                                <textarea rows="2" cols="70" name="book.allTags" onkeyup="displayAvailableTags(this)"></textarea>
                            </div>
                            <div style="font-size: 15px;height:30px;"></div>
                            <div id="mydiv" class="label" style="position:absolute;left:50px;width:200px;height:100px;z-index:20000;border:4px solid #C85D25;">I am here,i am here</div>
                        </div>
                    </div>
                </div>

                <div style="width:990px;text-align: center;padding-bottom: 20px;" >              
                    <input class="nextButton" type="button" Value="Save" onclick="disableAndsubmit(this,'addBook.mms?&MODE=NEW')"/>
                </div>

</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 308 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

As observed, the symptom matches an ancestor clipping the absolutely positioned box. A container with overflow: hidden (or any overflow other than visible) will create a clipping region so descendants that extend outside that container are cut off — a large z-index won’t change that. The absolute element is still bound by the ancestor’s content box.

Practical fixes (pick the one that fits the layout):

  • Allow overflow on the smallest possible ancestor:
    .someContainer { overflow: visible; }
  • If the element should be viewport‑anchored, use position: fixed:
    #mydiv { position: fixed; top: 120px; left: 50px; z-index: 20000; }
  • If overflow:hidden is needed to contain floats, avoid using it for clearing; use a clearfix and keep clipping off the wrapper that must show the popup:
    .clearfix::after { content: ""; display: table; clear: both; }
  • Portal the popup out of the clipped box (move it under <body> and compute absolute coordinates). Example pattern:
    var el = document.getElementById('mydiv');
document.body.appendChild(el);
// compute coords from the anchor and set el.style.left/top accordingly

Troubleshooting checklist: inspect ancestors for overflow, transform, filter, opacity < 1, or a positioned ancestor with its own z-index — any of those can create stacking/containment effects. Use the browser inspector to toggle overflow live; if making it visible fixes the display, then choose one of the safe fixes above (portal, fixed positioning, or clearfix) so layout and clipping behave as intended.

Summary: the clipping is not a z‑index problem but an overflow/containment one; change where the popup lives (or the overflow behavior of the smallest enclosing box) to make it fully visible.

Member Avatar for JorgeM

The style that is affecting your div is overflow:hidden. I'm not clear on what you are trying to accomplish so i'm not sure how to advise you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.