13

I have a absolute positioned div with overflow auto. Inside this div is another absolute positioned div. My problem is that this child div gets cut off due to the overflow. I want it to escape the container div as it would if overflow was not set. I have tried setting z-indexes but it does not help. What can I do?

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent {
   position:absolute;
   z-index:0 
   overflow:auto;

   width:400px;
   height:400px;

   border:1px solid #000;
}

.child {
    poisiton:absolute;
    z-index:1

    width:300px;
    height:450px;

    border:1px solid #f00;
}
Brian J
  • 694
  • 1
  • 21
  • 34
user969622
  • 471
  • 2
  • 5
  • 14
  • 1
    +1. [jsfiddle](http://jsfiddle.net) is popular 'round these parts. – Alex Sep 28 '11 at 23:21
  • 1
    I have done so. As you can see the child div does not come out of the parent. – user969622 Sep 28 '11 at 23:21
  • 1
    Why are you using `overflow: auto` if you don't want it to scroll? – Jacob Sep 28 '11 at 23:22
  • 1
    I need it to scroll other elements such as text (which is not in this example) however I need this div to popout as it will be display other information such as images. – user969622 Sep 28 '11 at 23:24
  • See my answer; it's not clear how exactly it would work for some elements to pop out and others to not. What would that look like? – Jacob Sep 28 '11 at 23:27
  • Without the overflow it functions to way I need it to, however the overflow is important to keep non-absolute positioned elements contained. But this child div is absolute positioned and I need it to not be affected by the overflow property – user969622 Sep 28 '11 at 23:31
  • 2
    Possible duplicate of [How to work around the automatic cutting of the overflown content in overflow: auto?](https://stackoverflow.com/questions/45164977/how-to-work-around-the-automatic-cutting-of-the-overflown-content-in-overflow-a) – peterh Jul 19 '17 at 11:55
  • 1
    @peterh how can a 6 year old question be the duplicate of one that was asked yesterday? If anything, it should be the other way around. – Peter B Jul 19 '17 at 12:23
  • @PeterB 1) Although it is atypical, no rule forbids it. 2) Furthermore, this question is abandoned without an accepted answer, while the other has an accepted answer. 3) Compare also the quality of the answers. 4) Closing a question as a dupe doesn't say any negative from the given question, it won't be deleted, it remains still upvote-able and so on. It only says that it has a better alternative. – peterh Jul 19 '17 at 16:12
  • @PeterB [There are already 5888 similar events happened on the StackOverflow.](https://data.stackexchange.com/stackoverflow/query/698506/questions-where-dupe-is-older-as-the-original) In the [record holder](https://stackoverflow.com/q/1266303/1783163), the dupe is 7.5 years older as the original. – peterh Jul 19 '17 at 16:48

2 Answers2

6

See if you can rely on another method to clear your floats. Changing your CSS to overflow: visible is definitely a good solution.

Your other solution is to take the div outside of its container so it doesn't get cut off, and put them both inside of a new container:

<div class="container">
    <div class="parent">
    </div>
    <div class="child">
    </div>
</div>

CSS:

.container { 
    /* apply positioning from .parent */
}
.parent {
    position: absolute;
    top: 0; 
    left: 0;
}
.child {
    /* apply positioning from .child */
}
Wex
  • 15,539
  • 10
  • 64
  • 107
1

If you want some elements to not overflow the parent and some elements to not, you'd be better off placing the current child div outside of the current parent. Just make it an absolutely positioned peer.

Jacob
  • 77,566
  • 24
  • 149
  • 228
  • How then can I make it appear from the point of reference inside the parent div? For example if it was inside the parent div and next to a some text it would popup next to that text, however if I move the div outside the parent div - how then would I have it popup next to that same text if the child element is no longer next to it? – user969622 Sep 28 '11 at 23:28
  • Meaning you want it to scroll with the rest of the content and pop out as well? I think you'd need JavaScript to achieve that effect. – Jacob Sep 28 '11 at 23:30
  • If you're up to using jQuery, there's an event for scrolling that you can consume. You'd then have to calculate the scroll position and move that second div according to that. See http://api.jquery.com/scroll/. – Jacob Sep 28 '11 at 23:32
  • 2
    I have found a solution by setting the child div to fixed position rather than absolute, it seems to be escaping the overflow of the parent container – user969622 Sep 28 '11 at 23:36