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

Question

Currently, I have 3 div, left center and right, I wish to have a div (notification) inside center section and is fixed position so that when scroll, it always stay at that position. And when change the browser size, the notification will still stay inside the center div and change size accordingly. Currently, when I use position: fixed, it is using viewport instead of the center div.

My desired output will be the notification blue bar is the same size relative to the center div with left and right padding and when reducing the size of the browser, the blue bar still stays within the center div.

Current Display: Expected Display:

 <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

added below css to the notification 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

Use position absolute replace of fixed. I add

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

Replace of position: fixed;

<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

You can try using Position : sticky, which entirely does the same thing as fixed other than positioning an element based on the user's scroll position. The only exception being, it is not supported in 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>