Is it possible to over-ride 'overflow: hidden' parents with 'position: sticky'?

问题

I have a two column layout where I want the right column to be position: sticky so it stays in view while scrolling the longer left column.

These are two bootstrap columns, so the first thing I had to do was remove the floats (and instead am using display: inline-block).

This works just fine on its own, or near the top of the DOM of this particular page, but in the rendered location (which, alas, is some 30 or so divs deep...don't ask...) I can't get it to work. Both columns just keep on scrolling.

I know if the parent element has an overflow property other than visible that can break position: sticky but that doesn't seem to be the issue here. Is it that if any parent element up the chain has overflow set that it can break sticky positioning?

I'm just sure what to be looking for in this situation as to determine what is breaking it in this situation. Are there other key things to look out for when it comes to sticky positioning?

EDIT: I reworded my question as it does definitely appear (after further investigation and testing) that the issue is a parent element near the top of the DOM was set to overflow-x: hidden. As this is shared code I'll have to hunt down the reason for that and why it's there.

But...in the interim, is there any known workarounds to this...where one can use an element further down the DOM tree as the containing element for the item positioned sticky?

In the example below, if you remove the overflow from .theproblem the page behaves as I want (right column 'sticks' as you scroll through the page).

.theproblem {
  overflow-x: hidden;
}

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}

<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>

JSBin link

回答1:

As you already noticed any overflow property between the sticky position and the scroll will break it (explained here: Why is 'position: sticky' not working with Core UI's Bootstrap CSS and here What are `scrolling boxes`?).

One workaround in your case is to move the scroll to another element and hide the default one:

.theproblem {
  overflow-x: hidden;
}
/* Added this */
.columnwrapper {
  height:100vh;
  overflow:auto;
}
body {
  overflow:hidden;
  margin:0;
}
/**/

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}

<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/56999537/is-it-possible-to-over-ride-overflow-hidden-parents-with-position-sticky

标签

css

position

sticky