An absolutely positioned element is aligned with the viewport. Why?

Question

css

The question is.
There is a structure:

<a href="#" class="banner">
<div class="btn"></div>
</a>

.banner {
    display: block;
    height: 100%;
    background: transparent url("moscow.jpg") no-repeat scroll 50% top;
    filter: none;
    margin-left: 0px;
    margin-top: 0px;
    opacity: 0.995705;
    width: 100%;
    visibility: visible;
    position: absolute;
    transform-origin: 50% 50% 0px;
    transform: translate3d(0px, 0px, 0px);
}
.btn {
    width: 232px;
    height: 39px;
    bottom: 87px;
    left: 539px;
    position: absolute;
    z-index: 200;
    background: transparent;
}

In this case, the parent .banner element is wider than the viewport and is aligned horizontally in the center. That is, the left edge of the block goes beyond the browser window.
If I, reducing the scale of the page, fit the block into the viewport, then positioning occurs relative to .banner - as it should.
BUT if the .banner doesn't fit, then the .btn is positioned to the left of the viewport - like position: fixed;
Tell. Either I'm stupid, or .. what's the matter?

Answer 1

Found the reason.
The width of the parent block is calculated dynamically using js and is equal to the current viewport width (with the maximum width = 1900).
is calculated not when resizing, but when rendering the parent block. (gallery slide)
so the parent of the .banner element is NOT wider than the viewport, it fits in the width of the window.
the background image is displayed at 100% scale and its width is again 1900.
after all, I blunted.)
thanks for the answers.

Answer 2

And the .banner's parent has position:relative? if not, then how else can he position himself

Answer 3

Set .banner to position: relative
htmlbook.ru/css/position