This is a *bug* in most browsers (IE appears fine) where the elements are fixed to the `iframe`, not the window. Typically, if you need something to be relative to the main document, it has to be in the main document. 

A workaround is to wrap your iframe in a fixed position div that takes up the whole width of the screen and then maximize the iframe within that.  This appears to resolve the issue

**HTML**:



    <div class="fixframe">
        <iframe src="http://getbootstrap.com/javascript/"></iframe>
    </div>

**CSS**:
    


    .fixframe {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;    
    } 
    .fixframe iframe {
       height: 100%;
       width: 100%;  
    } 


## [Working Demo in fiddle][fiddle]


**See Also**:

* [position:fixed inside of an iframe][SO1]
* [iframe with a css fixed position : possible?][SO2]
* [position fixed div in iframe not working][SO3]

[fiddle]: http://jsfiddle.net/KyleMit/SKhQY/show/

[SO1]: https://stackoverflow.com/q/8304148/1366033
[SO2]: https://stackoverflow.com/q/4195971/1366033
[SO3]: https://stackoverflow.com/q/7609062/1366033

When embedding a Bootstrap app in an iframe, modal dialogs always open at the top of the iframe, not the top of the screen. As an example, go to http://getbootstrap.com/javascript/ and open an example modal on the page. Then using the sample code below which places the same bootstrap page in an iframe, find a modal and open it:

    <html>
        <head>
        </head>
        <body>
            <table width="100%">
                <tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr>
                <tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here's some sidebar content I don't control either</td>
                    <td valign="top">
                        <iframe width="100%" height="10000px" 
                            scrolling="no" src="http://getbootstrap.com/javascript/">
                        </iframe>
                    </td>
                </tr>
            </table>
        </body>
    </html>

[Demo in fiddle](http://jsfiddle.net/uAqnU/3/show/)


How do I go about positioning the modal on the screen in this scenario? 

**UPDATE:** Unfortunately, my iFrame cannot fill the screen, nor can I make it fixed since it needs to blend into the rest of the page and the page itself has enough content to scroll. This is not my design and I ultimately intend to rework the whole thing, but this is what I have to work around for now. As a temporary option, I'm using javascript to tell the iframe parent to scroll to the top where the modal dialog pops up. While this is acceptable, this isn't the desired behavior.

I'm using angularjs and the ui-bootstrap library in my code but as you can see above, it's a bootstrap issue.

Bootstrap modal at top of iframe regardless of scroll position. How do I position it on screen?

With CSS alone, the answer is NO.

Once you apply `position: fixed` to an element you remove it from the document flow. This means that other elements don't respect the fixed element's space. In fact, they treat the fixed element as though it doesn't even exist.

So unless you know the height of the fixed element, you can't position another element to stack right above it.

I have the following element:



    <div class="bottom-est">Bottom-Est</div>



    .bottom-est {
      position: fixed;
      width:100%;
      bottom: 0;
      border: 1px solid black;
      background-color: orange;
    }

Can I place another fixed position element right above it? 

**If** it has a fixed/known height, I can just add `bottom:##px` to displace it:



    <div class="bottom-ish">Bottom-Ish</div>



    .bottom-ish {
      position: fixed;
      width:100%;
      bottom: 18px;
      border: 1px solid black;
      background-color: yellow;
    }

Which will accomplish the resulting goal:

![Screenshot of Goal][1]

But is there a way to do this that doesn't require knowing the height ahead of time.  I can't modify `.bottom-est` at all, but I can modify `.bottom-ish` as much as I want.





    body {
      margin:0;
      padding:0;
    }

    .bottom-ish {
      position: fixed;
      width:100%;
      bottom: 18px;
      border: 1px solid black;
      background-color: yellow;
    }
    .bottom-est {
      position: fixed;
      width:100%;
      bottom: 0;
      border: 1px solid black;
      background-color: orange;
    }



    <div class="bottom-ish">Bottom-Ish</div>
    <div class="bottom-est">Bottom-Est</div>




  [1]: https://i.stack.imgur.com/D72bN.png

Place an element right above another element with unknown height and position:fixed

Position `fixed` won't work because it's always relative to the page. You want to nest the elements inside another component that has a position `relative`. The elements inside will be positioned based on this parent.







    .top-container {
        position: relative;
        width: 20rem;
        border: 1px solid grey;
    }

    .container {
        padding: 1rem 1rem;
        overflow-x: auto;
        margin: 0;
    }
    .top-container button {
        position: absolute;
        right: 0;
        top: 0;
    }



    <div class="top-container">
      <button>Copy</button>
      <pre class="container">Long piece of content that overflows the width of container</pre>
    </div>

If I have a button with `position: absolute` inside of a div with `overflow-x: auto` the button will snap to the edge of the container.

However, if the div's content overflows the horizontal width, the button stays pinned to its starting location within the container after scrolling.

[![Screenshot example][1]][1]

It seems `absolute` ought to fix it to the side, but doesn't seem to do the trick

Is there any way to pin the child content to the right side of a horizontally scrollable div?

### Minimal, Complete, Verifiable Example





    .container {
        width: 20rem;
        border: 1px solid grey;
        padding: 1rem 1rem;
        position: relative;
        overflow-x: auto;
    }
    .container button {
        position: absolute;
        right: 0;
        top: 0;
    }



    <pre class="container">Multi Line Text
    Long piece of content that overflows the width of container<button>Copy</button></pre>






  [1]: https://i.stack.imgur.com/IFPO4.png