Hide Overflow on Elements with Fixed Position

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

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>

Hide overflow on elements with fixed position

Unfortunately it seems to be impossible to nest a fixed element within another element (fixed or not) and expect the outer element to wrap it and hide any overflow.

The only thing I can think of is setting the inner div to position:absolute instead of fixed. Here is an example based on your jsfiddle: jsfiddle.net/pjFa6/15 .

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 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).

Hide scrollbar on div with position: fixed property

.blabla2::-webkit-scrollbar {
width: 0px;
background: transparent;
}

Source:
Hide scroll bar, but while still being able to scroll

Elements with fixed position moving when body overflow is hidden

Basically...

• When the modal is opened, set the menu width to it's current width and set a window.onresize event handler which will resize the menu to the body's width.

• When the modal is closed, remove the fixed width and the window.onresize handler and return the menu to it's initial state.

---

In the spirit of less === more I've taken the liberty of simplifying your code as much as I can.

var body = $('body');var menu = $('#topBarFixed');
function toggleModal() {    menu.css('width', body.hasClass('locked') ? '' : menu.width());    window.onresize = body.hasClass('locked') ? '' : function () {        menu.css('width',  body.width());    }    body.toggleClass('locked');}
body.on('click', '.open-modal, .close-modal', toggleModal);

body {    padding-top: 40px;    height: 1000px;    background: lightblue;}
body.locked {    height: 100%;    overflow: hidden;}
.modal-container {    display: none;    overflow-y: scroll;    position: fixed;    top: 0; right: 0;    height: 100%; width: 100%;    background-color: rgba(255, 255, 255, 0.3);    z-index: 400;}
body.locked .modal-container  {    display: block !important;}
.modal {    height: 600px;    width: 200px;    margin: 50px auto;    background: indianred;}
#topBarFixed {    width: 100%;    background-color: lightgray;    position: fixed;    top: 0;    left: 0;    text-align:center;    display: inline-block;    z-index: 200;}
.topBarContent {    display: inline-flex;    flex-direction: row;    flex-wrap: nowrap;    justify-content: space-between;    align-items: center;}
.inner1 {    width:30px;    line-height: 40px;}
.open-modal {    position: relative;    top: 400px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="topBarFixed">    <div class="topBarContent">        <div id="inner" class="inner1">div</div>        <div id="inner" class="inner1">div</div>        <div id="inner" class="inner1">div</div>        <div id="inner" class="inner1">div</div>        <div id="inner" class="inner1">div</div>    </div></div>

<p>Scroll down to open layer</p><button class="open-modal">Open layer</button>

<div class="modal-container">    <div class="modal">        <button class="close-modal">Close layer</button>    </div></div>

---

Related Topics