溢出：隐藏 + 位置：固定 parent - 查看 child 位置：绝对

Question

我需要显示 child 块，它绝对定位在 parent 块中，它有 固定位置 和 overflow: hidden 属性:

这里是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;
}

如果 parent 有 position: static 和固定高度，它会起作用。或者，如果 child 有 position: fixed...

Answer 1

尝试位置：相对于父元素。

Answer 2

您可以通过将 .parent div 包装在 .grandparent div 中并将 position:fixed; 属性传递给祖父母来设置它，就像这样: 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;
}

溢出：隐藏 + 位置：固定 parent - 查看 child 位置：绝对

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

html

css

frontend