发表新帖
发表新帖

How can I get an absolutely-positioned div to extend outside its relativley-positioned parent, which has overflow: auto?

前端 未结
关注
8 609
栀梦
栀梦 2021-02-01 14:53

I have a relatively -positioned div, which has overflow: auto set. Inside that, I have a div which acts as a sort of drop-down menu. I want the drop-down div to e

相关标签:
8条回答
  • 说谎
    2021-02-01 14:53

    Try using overflow: visible; instead.

    0 讨论(0)
  • 忘了有多久
    2021-02-01 14:54

    Given your specifications, this is the best I could came up with:

    <div style="position: relative; height: 100px; width: 100px; background: red;">
    <div style="height: 100px; width: 100px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;"></div>
</div>

    There you have your div with overflow: auto; so scroll bars will appear if needed, and the drop-down div will look like it's extending "outside it's parent". Both are kept together under the same parent div, as you stated that they were contextually relevant to each other.

    0 讨论(0)
  • 青春惊慌失措
    2021-02-01 14:59

    That's impossible. If you set overflow:auto on the parent DIV, that locks any child DIV from breaking out of the content box.

    You could try and fiddle with z-index values, but that may cause you to go blind in the left eye.

    An idea would be to wrap the parent DIV with another DIV so that the DIV you want to pop out will be positioned according to the grandparent DIV. But that way will give you carpal tunnel and won't work either because you would have to know where in the flow of the parent DIV you want the child DIV to be.

    0 讨论(0)
  • 小蘑菇
    2021-02-01 15:06

    Just remove the overflow: auto part and close the inner div correctly with a closing tag, that way it works in IE6, IE7, Firefox 3 and Opera => probably all browsers.

    0 讨论(0)
  • 悲哀的现实
    2021-02-01 15:14

    You use absolute positioning of inner div to position it relative to the outer div, but you do not want its content to count as outer div content. To achieve that, you need to separate inner div position from inner div content. You can try to do that by putting contents into fixed div.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head> <title>Test</title> </head>

<body>

<div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;">
        <div style="position: absolute; top: 20px; left: 20px; height: 10px; width: 10px;">
            <div style="position: fixed; height: 100px; width: 100px; background: green;"></div>
        </div>
</div>

</body>
</html>

    The trick is that fixed div w/o top/bottom/left/right specified will position itself at its "static" position, which seems to be what you need.

    You may have problems with z-order, but, from your explanation, you do want your "menu" to be above everything else. (I assume that it comes and goes). You will sure have problems printing the page - if there is more than one page, fixed element repeats itself.

    As jvenema pointed out, this won't work in IE6. :(

    0 讨论(0)
  • 执念已碎
    2021-02-01 15:15

    I'd say the fact that it's context sensitive is what's causing you problems. Perhaps you could restructure how that is set up? I'd have a parent div class that provides the context to these two, and have them separated from each other inside this div (using relative positioning to align them as you want?)

    My 2c

    0 讨论(0)
 看不清?
提交回复
热议问题