css - 位置粘性在容器内不起作用，但固定位置可以吗？

Question

我正在尝试使元素变得粘稠并且没有运气。元素是bd-right-wrapper如果我制作元素fixed，那么它会保留，但没有那么粘。我已经阅读了其他关于如何overflow在容器上删除、设置left:0等的 SO 文章，但没有任何效果。我错过了什么？

演示

.split-wrapper {
    display: flex;
    border-radius: 20px;
    padding: 10px;
    background: black;}

.split-left {
    background-image: url("xyz.jpg"), url("xyzz.jpg");
    background-repeat: repeat, no-repeat;
    background-size: auto,cover;
    /*overflow: hidden;*/ /* tried with and without overflow<< this is comment not in my real code*/
    border-radius: 20px 0px 0px 20px;
    position: relative;} /* tried with and without position relative<< this comment is not in my real code*/

.bd-right-wrapper {
    display: flex;
    padding: 20px 0 10px 15px;
    flex-direction: column;
    position: sticky;
    top: 0;}

.split-right{
     border-radius: 20px;
     display: flex;
     overflow: hidden;}

 <div class=col-sm-12 split-wrapper>
  <div class=col-sm-12 split-left>
    <div class="bd-right-wrapper">
    //content
    </div>
    <div class="split-wrapper">
    //content
    </div>
  </div>
</div>

标签： css

Answer 1

即使你有一堆无效的标记和 CSS，我猜这就是你所追求的：

1. .split-wrapper是父弹性元素
2. .split-left并且split-right是两个直系子女
3. .bd-right-wrapper是一个子元素split-left并且是一个sticky元素。该元素需要具有粘性类，因为父级将拉伸其父级的整个高度。

我向 中添加了一些基本flex属性split-left，split-right因此您可以看到它正在工作。

.split-wrapper {
  display: flex;
  border-radius: 20px;
  padding: 10px;
  background: black;
  color: white;
}

.split-left {
  flex: 0 0 20%;
}

.split-right {
  flex: 0 0 80%;
}

.bd-right-wrapper {
  padding: 20px 0 10px 15px;
  position: sticky;
  top: 0;
}

<div class="col-sm-12 split-wrapper">
  <div class="col-sm-12 split-left">
    <div class="bd-right-wrapper">
      I'm sticky
    </div>
  </div>
  <div class="split-right">
    Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui nullam.
    Consequat luctus tempus. Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam
    eu nec elit commodo mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet
    dolor et in id. Ut blandit justo. Donec fringilla cursus enim velit ullamcorper. Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra
    nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui nullam. Consequat luctus tempus. Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui.
    Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus
    malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id. Ut blandit justo. Donec fringilla cursus enim velit ullamcorper. Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy
    venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui nullam. Consequat luctus tempus. Pede tellus eu mattis morbi donec. Natoque class leo.
    Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo mi voluptatum gravida ante bibendum justo. Eleifend nec
    eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id. Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.
  </div>
</div>