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

Question

当前，我有3个div（左中和右），我希望在中间部分有一个div（通知），并且固定位置，以便在滚动时始终保持在该位置。而且，当更改浏览器大小时，通知仍将停留在div中心，并相应地更改大小。当前，当我使用position：fixed时，它使用的是视口而不是center 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，除了根据用户的滚动位置定位元素外，它的功能与固定功能完全相同。 唯一的例外是，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>