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

Question

目前，我有 3 个 div，左中右，我希望在中心部分有一个 div(通知)并且位置固定，这样当滚动时，它总是停留在那个位置。并且当更改浏览器大小时，通知仍将保留在中心 div 内并相应地更改大小。目前，当我使用 position: fixed 时，它使用的是视口(viewport)而不是中心 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>