如何将CSS样式限定在指定Div内？fixed定位元素溢出问题

position: fixed的定位基准是浏览器视口，和它的父元素divTwo完全无关——不管它嵌套在哪个容器里，都会固定在视口的对应位置，自然会覆盖页面上的其他元素（包括blueBackground）。要实现“仅在divTwo内生效”的效果，得换定位方式或者调整父元素属性。

根据你的需求，推荐两种可行方案：

方案一：改用绝对定位（限制在divTwo范围内） #

给父元素divTwo设置相对定位和溢出隐藏，子元素用绝对定位，这样蓝色方块会相对于divTwo定位，且超出divTwo的部分会被隐藏，不会跑到blueBackground上方。

修改后的代码：

HTML（无需改动） #

<div class="blueBackground"></div>

<div class="divTwo">
    <div class="col-md-12 col-sm-10">   
        <div id="blue_square"></div>
    </div>   
</div>

CSS #

.divTwo {
  position: relative; /* 让子元素的绝对定位以它为基准 */
  overflow: hidden; /* 隐藏超出divTwo的部分 */
}

#blue_square{
  position: absolute; /* 替换fixed为absolute */
  right: 0;
  z-index: 9;
  width: 370px;
  box-shadow: 0 0 6px transparent;
  /* 垂直居中在divTwo内 */
  top: 50%;
  transform: translateY(-50%);
}

JS（可选，若需动态计算高度） #

如果还是需要用JS计算垂直位置，改成基于divTwo的高度：

$("#blue_square").css("top", $(".divTwo").height() / 2 - 90);

方案二：使用粘性定位（随divTwo滚动） #

如果你希望蓝色方块在divTwo处于视口内时固定显示，divTwo滚出视口后跟着消失，可以用position: sticky：

CSS修改 #

.divTwo {
  position: relative;
}

#blue_square{
  position: sticky;
  right: 0;
  z-index: 9;
  width: 370px;
  box-shadow: 0 0 6px transparent;
  /* 垂直居中 */
  top: 50%;
  transform: translateY(-50%);
}

这种方式下，蓝色方块会始终固定在divTwo的右侧，不会跑到blueBackground的区域。

内容的提问来源于stack exchange，提问作者user22401044