发表新帖
发表新帖

CSS position:fixed inside a positioned element

后端 未结
关注
8 1193
庸人自扰
庸人自扰 2020-12-13 08:15

I have a positioned div whose content can be too long so scrollbars appear (overflow:auto set). It functions as a dialog box in an ajax app. I want to fix a clo

相关标签:
8条回答
  • 南方客
    2020-12-13 08:52

    Position:fixed gives an absolute position regarding the BROWSER window. so of course it goes there.

    While position:absolute refers to the parent element, so if you place your <div> button inside the <div> of the container, it should position where you meant it to be. Something like

    EDIT: thanks to @Sotiris, who has a point, solution can be achieved using a position:fixed and a margin-left. Like this: http://jsfiddle.net/NeK4k/

    0 讨论(0)
  • 面向向阳花
    2020-12-13 08:53

    The current selected solution appears to have misunderstood the problem.

    The trick is to neither use absolute nor fixed positioning. Instead, have the close button outside of the div with its position set to relative and a left float so that it is immediately right of the div. Next, set a negative left margin and a positive z index so that it appears above the div.

    Here's an example:

    #close
    {
        position: relative;
        float: left;
        margin-top: 50vh;
        margin-left: -100px;
        z-index: 2;
    }

#dialog
    {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: scroll;
        float: left;
    }

<body> 
    <div id="dialog">
    ****
    </div>

    <div id="close"> </div>
</body>
    0 讨论(0)
 看不清?
提交回复
热议问题