Parent & Child With Position Fixed, Parent Overflow:Hidden Bug

parent & child with position fixed, parent overflow:hidden bug

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.

Whereas the position and dimensions of an element with
position:absolute are relative to its containing block, the position
and dimensions of an element with position:fixed are always relative
to the initial containing block. This is normally the viewport: the
browser window or the paper’s page box.

ref: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

Position fixed not working within overflow hidden parent

It is fixed, it's just fixed to the parent element, which you have a scroll on.

<div class="parent">
  <div class="sub-parent">
    <div class="child-1">
          <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
      </div>

     <div class="child-2">
       <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
     </div>
  </div>
    <div class="child-3">
        <h1>I am fixed.</h1>
    </div>

</div>


.parent {
  position: relative;
}
.sub-parent {
    position: absolute;
    width: 320px;
    right: 0;
    top: 0;
  height: 250px;
  overflow: auto;
    bottom: 0;
    background: yellow;
    z-index: 1;
}

.parent .child-3 {
    position: fixed;
    right: 0;
    top: 5px;
    color: red;
  z-index: 10
}

https://jsfiddle.net/baqfqojs/

Hope that works for you.

Fixed position child, overflow hidden parent. Hiding bottom only

overflow:hidden will do nothing in your case because you made the elements to be fixed¹. What your are facing is the logical result of the painting order since you didn't specify any z-index so the second position:relative element will be painted above the first position:fixed and so on that's why the second background will hide the first title and so on.

With position:fixed you won't be able to achieve this because your code is almost equivalent to the below one where there is no more relation between the parent element and child.

.parent,.child{  position: relative;  height: 100vh;  display: flex;  font-family: sans-serif;  font-weight: bold;  font-size: 5em;  align-items: center;  justify-content: center;  text-align:center;  overflow: hidden;  width:100%;}
.one {  background: pink;}.one + .child {  color: green;}
.two {  background: aquamarine;}.two + .child {  color: blue; }
.three {  background: pink;}.three + .child {  color: red;}.child {  position: fixed;  top: 50%;  transform: translateY(-50%);}

<div class="parent one"></div><div class="child">One</div><div class="parent two"></div><div class="child">Two</div><div class="parent three"></div><div class="child">Three</div>

Fixed Element is Being Affected by overflow:hidden Parent

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block :

If the position property is absolute or fixed, the containing block
may also be formed by the edge of the padding box of the nearest
ancestor element that has the following:
A transform or perspective value other than none

Ancestor <div class="shirts-list__colors"> has a transform value of translateY(0).

Overflow hidden on sticky parent when child is fixed

Not sure whether you need separate content for the nav and footer per section but this answer only applies if you want the same header and footer content to appear over all sections and just change color.

It's possible using mix-blend-mode and the support is good for modern browsers. The spec says that Safari doesn't work "On SVG elements" but it seems to work fine on Safari in the demo below, maybe because it's applied to the SVG's parent.

I pulled the nav and footer out of each section and made one copy of each at the top. Then I applied mix-blend-mode: difference; to both of them and made the fill color of the SVG elements white. Then I added mix-blend-mode: screen; to the .dark class which makes it so that whenever the white SVG elements with difference on their parent container pass over it the color of the SVG elements will change to white. This will not be very useful if you're looking to support IE or if you want different headers and footers by section but in the event that you just want what you had in your code demo to work as you explained then it should be fine for modern browsers.

If you do need varying content per section then it will most likely require Javascript since a fixed element will not respect a relative positioned parent element's rules or will not act like a window fixed element on scroll when using the translateZ hack for instance, good luck!

html {
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 99;
  mix-blend-mode: difference;
}

.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99;
  mix-blend-mode: difference;
}

.sticky {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  background-color: #ffffff;
  color: #000000;
}
.sticky p {
  position: sticky;
  top: 50%;
  transform: translateY(-50%)
}
.dark {
  background-color: #1e1e1e;
  color: #fff;
  mix-blend-mode: screen;
}

<div class="nav"><svg height="30" width="200">
  <text x="0" y="15" fill="#fff">Logo svg!</text>
 </svg></div>
<div class="footer"><svg height="30" width="200" transform="rotate(90)">
  <text x="0" y="15" fill="#fff">Footer!</text>
 </svg></div>
<main>
  <div class="sticky">
    <p>Section Light</p>
  </div>
  <div class="sticky dark">
    <p>Section Dark</p>
  </div>
  <div class="sticky">
    <p>Section Light</p>
  </div>
  <div class="sticky dark">
    <p>Section Dark</p>
  </div>
  <div class="sticky">
    <p>Section Light</p>
  </div>
</main>

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

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;
}

Parent & Child With Position Fixed, Parent Overflow:Hidden Bug