How to keep fixed positions of elements inside transformed elements?

Question

it is a well-known “mistake” that elements with a fixed position lose their position if the container is moved. For example, if I have a structure like this:

<div class="container">
   <div class="fixed"></div>
</div>

and, say, the container scrolls when the conteiner transforms (say, translates (x, y), rotate () or so on), then the fixed element behaves as if it was positioned relative to and scrolls with the container. For example, I can see it on the latest firefox.

How can I fix this problem? Is there any way?

Answer 1

. .
(. , SO, )

, , , , .

document.addEventListener('click', function() {
  document.getElementById('container').classList.toggle('transformed')
}, false);

#bg {
  border: 1px solid #AFA;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#container {
  border: 1px solid #FAF;
  height: 50%;
  width: 75%;
  position: relative;
  margin: 0 auto;
  overflow: auto;
}
#content {
  background: rgba(125, 175, 0, .7);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
.transformed {
  transform: translate(0, 5em);
}

<div id="bg">
  <div id="container" class="transformed">
    .<br>.<br>.<br>.<br>.<br>.<br>.
    this is a scrollable paragraph
    <br>.<br>the "fixed" content does scroll with the paragraph
    <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
    you can click to toggle the transformation On/Off
    <br>.<br>.<br>.<br>.<br>.
    <span id="content">relatively fixed content</span>
  </div>
</div>

-, , .
,, "" ( IE, ). , , , , .

, height:100%; width:100%; overflow:auto, "" .

, , . , overflow:visible hidden, .
, block inline-block.

#bg {
  border: 1px solid #AFA;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#container {
  border: 1px solid #FAF;
  height: 50%;
  width: 75%;
  position: relative;
  margin: 0 auto;
  overflow: visible;
}
#wrapper {
  height: 100%;
  width: 100%;
  overflow: auto;
}
#content {
  background: rgba(125, 175, 0, .7);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
.transformed {
  transform: translate(0, 50%);
}

<div id="bg">
  <div id="container" class="transformed">
    <div id="wrapper">
      .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
      <span id="content">relatively fixed content</span>
    </div>
  </div>
</div>

Answer 2

, positioned: fixed;, , . :

<div class="fixed"></div>
<div class="container"></div>

Answer 3

position: fixed; , . MDN .

. .

, , , - , , "".

, -, div .container div , absolute . . CSS

.container {
  width: 200px;
  height: 100px;
  position: relative;
}
.absolute {
  position: absolute;
  width: 20px;
  height: 10px;
  top: 50px;
  left: 50px;
}

Please note that with the positioning of the inner div as absoluteI also positioned the outer div as relative, since the inner div takes its position in relation to the nearest parent div located as anything other than static.