Fixed object clipped to parent - css

Question

I have a fixed object positioned within a relatively positioned parent. The parent moves as you scroll down the page, and the fixed object stays in a particular spot on the page. The problem is that the fixed object is visible regardless of where the relatively positioned parent is positioned.
Is there any way to clip fixed objects to their parents?
I've been searching for a work around, but I can't find one.

Answer 1

Because a fixed position element is fixed with respect to the viewport, not another element. Therefore since the viewport isn't cutting it off, the overflow becomes irrelevant.

Answer 2

What you are asking is not possible by design. try using position absolute instead of fixed.
Look at this table about positioning, copied from www.w3schools.com:
static >> Default. Elements render in order, as they appear in the document flow Play it »
absolute >> The element is positioned relative to its first positioned (not static) ancestor element Play it »
fixed >> The element is positioned relative to the browser window Play it »
relative >> The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position Play it »
inherit >> The value of the position property is inherited from the parent element

Answer 3

I think what you're looking for is position: absolute instead of fixed. A fixed position is always fixed to the viewport, whereas absolute positioning is based on the closest positioned ancestor.
Here's a fiddle that shows this behavior: http://jsfiddle.net/8u7aZ/
HTML:
<div id="parent">
Some text.
<div id="littleChild"></div>
</div>
CSS:
body {
height: 1000px;
}
#parent {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
#littleChild {
position: absolute;
bottom: 10px;
right: 10px;
width: 10px;
height: 10px;
background-color: #000;
}
(I only set the body height to 1000px so that the box would scroll and show the positioning.)