Having a CSS position fixed within a div container with the same width as its parent container

At the moment, I have three sections: left, center, and right. I want to add a fixed position div (notification) inside the center section so that it remains in place when scrolling. Additionally, I want this notification to resize according to changes in browser size while staying within the center div. Currently, when I use position: fixed, it uses the viewport instead of the center div.

The desired outcome is to have a blue notification bar that stays relative to the size of the center div with padding on the left and right. The blue bar should remain within the center div even when the browser size is decreased.

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>

htmlcss

Answer №1

included the following css in 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

Instead of using position: fixed, try switching to position: absolute.

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

Here is the updated code:

<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

If you're looking to achieve a sticky element that behaves similarly to a fixed element, you can use the CSS property Position: sticky. This allows an element to stick to a specific position based on the user's scroll, much like Position: fixed. However, it's important to note that this feature is not supported in Internet Explorer 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>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the image inside a resizable container maintains the correct aspect ratio

I often encounter a situation where I need to showcase a series of thumbnails/images that adhere to a specific aspect ratio within a flexible container. My current approach involves using a transparent, relatively positioned image to enforce the correct as ...

htmlcss

Achieving a layered effect with elements overlapping onto another div

Looking for a way to create a design where the text in id="text-field" overlaps with id="image-field". Need some guidance on how to achieve this effect. Any help is appreciated. <!DOCTYPE html> <html> <body> <div class=" ...

htmlcss

How to Use Vue.js to Find the Nearest Div Element with a Specific

Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...

javascripthtmlcssvue.js

Transform the numerical character into a checkbox within a table using AngularJS

In my HTML code, I am utilizing AngularJS to present data in a table. <div ng-controller="CheckCtrl"> <table class="table table-hover data-table sort display"> <thead> <tr> <th class="Serial_"> ...

htmlangularjscheckbox

"I'm facing an issue with aligning elements in my ReactJS application using CSS Flexbox. Despite setting up a flexbox layout, I am unable to

Despite setting up a flexbox to align my elements, I am struggling with vertical centering on my page. I have made sure to use a container for the page and set brute size with viewport units. Here is my sandbox: https://codesandbox.io/s/rlk3j68pmq. Belo ...

cssreactjsflexbox

Switch up div content - advertisements at the top or bottom

An issue has arisen where the ads on a website are currently being displayed at the bottom of the source code, but they should actually be visible at the top. Here is the ad placeholder code: <div id="300_250_placeholder"></div> And here is ...

javascriptjqueryhtmlcss

What is the best way to adjust the size of carousel images within a box element?

How can I ensure that carousel pictures are displayed clearly within the box without overflowing? The code I tried resulted in the pictures overflowing from the box and not being visible clearly. How can I resolve this issue? .container { width: 1490px; ...

javascripthtmlcssbootstrap-4

Adjusting the box sizing of a contentEditable DIV to conceal the first and last characters

I am having trouble with a ContentEditable div that requires the hiding of characters, specifically the first and last character. I need to overlay a layer on top of the "#" character to make it appear as if the character and the border line beneath it are ...

htmlcsscontenteditable

Transferring live data between AJAX-triggered pop-up windows

Utilizing modals frequently in my application is a common practice. There are instances where I need to transfer data from one modal box to another. For instance: Suppose there is a table listing different car manufacturers (Audi, BMW, Honda, etc). Each r ...

javascriptphphtmlajax

Improvement in Select2 Change Event: Update the subsequent select2 box options based on the value change in the preceding select2 box

I need assistance with two select boxes, namely Category and Sub-category. My objective is to dynamically alter the available options in the subcategory box based upon the value selected in the category box. Additionally, I would like to load data for the ...

javascriptphpjqueryhtml

Is there a way to create an <a> element so that clicking on it does not update the URL in the address bar?

Within my JSP, there is an anchor tag that looks like this: <a href="patient/tools.do?Id=<%=mp.get("FROM_RANGE") %>"> <%= mp.get("DESCRITPION") %></a>. Whenever I click on the anchor tag, the URL appears in the Address bar. How can ...

javascripthtmljspjquerystruts

Steps for changing the direction of a dropdown menu to the left instead of the right

I'm having a bit of an issue with my inbox setup. I have a dropdown for it, but the dropdown is appearing off to the right and since it's at the end of my top navbar, it's not very visible. Here is the CSS code for the inbox: .notification ...

htmlcss

What are the reasons behind the ineffectiveness of !important in CSS?

I am looking to increase the font-size of all text on my website to 200%, you can find some test code in this Fiddle link. If it is a PX issue, why does the code work when I add the style to "<h2>"? <div> <h2 class="test" style="font-size: ...

htmlcss

Default values for CSS variables: only apply if the variable has not been previously defined

My Web Component relies on the power of CSS variables. To set default values for these variables is crucial. With their wide usage across multiple files, it's essential to define them once and for all. The initial approach turns the text color to b ...

csscss-variables

Ensure that when you click on the next dropdown menu opener button, the previous dropdown menu closes and only the new menu remains open

Take a look at this page first to get an understanding: On this page, I have implemented multiple dropdown menus that should open when clicked on their respective opener buttons (3 bar icon) and close either when clicked again or anywhere else on the page ...

javascripthtmlcss

Automate the login process for a website and programmatically fill out and submit a form

I am currently trying to automate the login process on Skype's website using Selenium in C#. Everything goes smoothly until I reach the password field, which seems to be elusive to Selenium. I have tried various methods to locate the password field bu ...

javascriptc#htmlseleniumfirefox

I'm using Bootstrap (version 5.3) and when I tried to replicate the features from the examples, I noticed that the background isn't being copied over

I encountered an issue today while working on a website using bootstrap. I was copying features from examples in the bootstrap section, but when I pasted the code into my coding platform, the background appeared transparent and did not display as expected. ...

htmlcssbootstrap-5

Sass - Retain the original class hierarchy

Apologies for the vague title, I couldn't think of a better one. As I compile my scss, this piece of code: .foo { ... &__bar { ... } } transforms into the expected output below: .foo { ... } .foo__bar { ... } However, I actually need it t ...

csswebpacksass

Can you guide me on setting up a multi-selection option for a field in my Wordpress Theme by Templatic?

My website is http://aisiel.ro, a real estate agency website. Under the slider, there is a search field where we have the option to select an area called "Zona" - Area in English. Currently, users can only choose one area for their search, but I want to ...

phpjqueryhtmlwordpress

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

htmlcsscss-selectors