CSS 位置固定在与父容器宽度相同的 div 容器中

Question

目前，我有 3 个 div，左中和右，我希望在中心部分有一个 div（通知）并且位置固定，以便在滚动时始终保持在该位置。并且当改变浏览器大小时，通知仍然会停留在中心 div 内并相应地改变大小。目前，当我使用位置：固定时，它使用视口而不是中心 div。

我想要的输出将是通知蓝条相对于中心 div 的大小相同，具有左右填充，并且当减小浏览器的大小时，蓝条仍然停留在中心 div 内。

当前显示： 预期展示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
	<div class="row">
		<div class="col-lg-2" style="background-color: red; height: 1000px">Test</div>
		<div class="col-lg-7" style="background-color: yellow; height: 1000px">
		
			<div style="display: block; position: relative; z-index: 9999; width: 100%; padding-left: 5; top: 50"><div style="position: fixed; background-color: blue; ">Notification</div></div>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>

		</div>
		<div class="col-lg-3" style="background-color: green; height: 1000px">Test3</div>
	</div>
</div>

Answer 1

在css下方添加到通知div

position: absolute; background-color: blue; height:30px;
      width:100%; top:20px; color: white

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
	<div class="row">
		<div class="col-lg-2" style="background-color: red; height: 1000px">Test</div>
		<div class="col-lg-7" style="background-color: yellow; height: 1000px">
		
			<div style="display: block; position: relative; z-index: 9999; width: 100%; padding-left: 5; top: 50"><div style="position: absolute; background-color: blue; height:30px;
      width:100%; top:20px; color: white">Notification</div></div>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>
		Test<br>

		</div>
		<div class="col-lg-3" style="background-color: green; height: 1000px">Test3</div>
	</div>
</div>

Answer 2

使用位置绝对替换固定。我加了

position: absolute;top:30px;width: 90%;text-align:center;left:5%; 

位置替换：固定；

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-lg-2" style="background-color: red; height: 1000px">Test</div>
        <div class="col-lg-7" style="background-color: yellow; height: 1000px">

            <div style="display: block; position: relative; z-index: 9999; width: 100%; padding-left: 5; top: 50"><div style="position: absolute;top:30px;width: 90%;text-align:center;left:5%; background-color: blue; ">Notification</div></div>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>
        Test<br>

        </div>
        <div class="col-lg-3" style="background-color: green; height: 1000px">Test3</div>
    </div>
</div>

Answer 3

您可以尝试使用 Position :sticky，除了根据用户的滚动位置定位元素之外，它的作用与 fixed 完全一样。 唯一的例外是，IE 11.0 不支持它

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-2" style="background-color: red; height: 1000px">Test</div>
    <div class="col-lg-7" style="background-color: yellow; height: 1000px">

      <div style="
    position: sticky;
    z-index: 9999;
    padding-left: 5;
    top: 50px;">
        <div style="background-color: blue; ">Notification</div>
      </div>
      Test<br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br> Test
      <br>

    </div>
    <div class="col-lg-3" style="background-color: green; height: 1000px">Test3</div>
  </div>
</div>