overflow: hidden + position: fixed parent - view child with position: absolute

Question

I need to show child block, which positioned absolutely in parent block, which have fixed position and overflow: hidden property:

Here is a fiddle .

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    background-color: green;
    width: 200px;
    height: 100%;
    position: fixed;
    overflow: hidden;
}

.child {
    background-color: red;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50px;
    left: 175px;
}

It works if parent have a position: static and fixed height. Or, if child have a position: fixed ...

Answer 1

You can set it up by wrapping your .parent div inside a .grandparent div and transferring the position:fixed; attribute to the grandparent, like so: http://jsfiddle.net/jGLvk/1159/

HTML:

<div class="grandparent">
  <div class="parent">
      <div class="child"></div>
  </div>
</div>

CSS:

.grandparent{
    position:fixed;
}

.parent {
    background-color: green;
    width: 200px;
    height: 100px;
    overflow: hidden;
}

.child {
    background-color: red;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 200px;
    left: 175px;
}

Answer 2

尝试位置：父元素上的相对位置。