Placing a div with position:absolute inside another div with position:absolute and turning them into position:fixed

HTML

<div class="box1"></div>
<div class="box2">
  <div class="box3"></div>
</div>

CSS

Properties of box1, box2 and box3 are:

 box1 {
   position: absolute;
   z-index: 100;
   background-color: rgba(39, 39, 39, 0.3);
   height: 90px;
   width: 712px;
   left: 0px;
   bottom: 216px;
}

.box2 {
  position: relative;
}

.box3 {
  position: absolute;
  bottom: 263px;
  margin-left: 50px;
}

In the given scenario, I have set up box1 as absolute and placed box3 inside it by also making it absolute. However, a challenge arises when attempting to make box1 fixed but maintaining box3's positioning. The trick lies in adjusting the CSS to achieve this smoothly.

javascriptjqueryhtmlcss

Answer №1

To keep div1 and div3 in place while scrolling, change their positions to fixed. There is also a small error in the CSS code for div1 - the period should come before "div1" instead of after.

.div1 {
   position: fixed;
   z-index: 100;
   background-color: rgba(39, 39, 39, 0.3);
   height: 90px;
   width: 712px;
   left: 0px;
   bottom: 216px;
}

.div2 {
  position: relative;
}

.div3 {
  position: fixed;
  bottom: 263px;
  margin-left: 50px;
}

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

Effortlessly Transition to Full Screen with Div Expansion on Click

I'm currently working on creating a smooth transition for a div to expand fullscreen when clicked. My goal is to achieve a similar effect as the case studies on this website: Although my code can make the div go fullscreen, there's an issue with ...

javascriptjquerycsscss-animations

Unsuccessful translation of HTML symbol codes within a toggle function using jQuery

Is there a way to toggle between the symbols + and - using HTML entity codes &#43; and &#45;? I have attempted different solutions for toggling HTML content, but none seem to work correctly with these specific codes. It toggles once, but doesn&apo ...

javascriptjqueryhtmltoggle

Implementing jQuery Ajax: nesting Ajax calls within Ajax calls

Check out this code snippet for creating a contact form with minimalistic design and captcha spam protection: Minimalist Contact Form Below is the menu list structure: <ul class="menu"> <li class="company"><a href="#"> company</a&g ...

jqueryajax

Using Firebase Realtime Database, this React dropdown menu is populated with options in real-time. Combining the features

I'm currently facing an issue with a dropdown that is supposed to loop through data fetched from the Firebase realtime database. The goal is to assign a selected value to a Formik form for saving it to another object in the database. In my database, ...

javascriptreactjsfirebasematerial-uiformik

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

cssvue.jsvuetify.js

Setting the title of a document in Angular 5 using HTML escaped characters

It seems like a simple problem, but I can't seem to find an easy solution. Currently, I am using the Title service to add titles to my documents and everything is working fine. You can check out the documentation here: https://angular.io/guide/set-doc ...

htmlangulartypescriptangular5

Customize your WooCommerce Cart page by adding fees for selected options

I have recently updated my cart page to include checkboxes that allow customers to add extra items to their orders. These changes were inspired by an answer on Custom checkbox that adds a fee in WooCommerce cart page. The last checkbox successfully doubl ...

phpjqueryajaxwoocommercesession-variables

Switching between displaying or hiding one of two backgrounds within a div using CSS and jQuery

Seeking guidance on implementing a two-background div setup where A is constantly displayed within the element and toggling B based on button control click. HTML <div class="container"></div> CSS .container{ url(B.png) 10px 10px no-repeat ...

jquerycssbackground-image

The Angular filter is failing to display the category value

My issue lies in adding a filter to display categories, as my setCurrentCategory function is not showing any value but instead displaying 'undefined'. The goal is to show the category for each person. I'm using ng-click to pass to my functio ...

javascriptangularjs

How to avoid line breaking in Select component with icon and text using React Material-UI

I am working on a Select element that includes both ListItemIcon and ListItemText. Whenever the select option is chosen, there seems to be an unwanted line break appearing. Despite finding various workarounds for this issue, I am keen on discovering the ...

javascriptreactjsmaterial-ui

Utilizing AngularJS to upload numerous independent attachments to CouchDB

My goal is to upload multiple files to a couchdb document using angularjs. Despite my efforts with an angular.forEach loop, I am facing issues as the asynchronous $http calls do not wait for the previous loop to finish before moving on to the next one. Her ...

javascriptangularjscouchdb

Issues with functionality arise when cloning HTML divs using JQuery

VIDEO I created a feature where clicking a button allows users to duplicate a note div. However, the copied note does not function like the original - it's not draggable and changing the color of the copied note affects the original note's color. ...

javascripthtmljquery

How can we add up the sum with just one click and then display the

Is there a way to calculate numbers within specific DIV boxes and display the total in a separate DIV when a box is clicked? I've attempted different methods, including enclosing the code within the window.onclick function. Check out my code on this J ...

javascripthtmljquery

Querying the database to check for the presence of a file in a .js file on Google App Engine

I'm currently working on implementing an upload button for users to upload files to our storage system using Google App Engine with Python, as well as HTML and JavaScript for the views. To achieve this, we have an HTML file and a.js script that promp ...

javascriptpythonhtmlgoogle-app-enginegql

Utilize jQuery's addClass Method when Submitting a Form Using Ajax

When the form is submitted, I would like to add a class and display a loading animation before executing the AJAX request. However, when setting async to false in the AJAX call, the AJAX request will be executed first before displaying the loading animatio ...

javascriptjqueryajax

Activate a JavaScript mouse event outside of an element

https://jsfiddle.net/f8L300ug/3/ Attempting to create a drag-to-resize feature, inspired by the provided example. One challenge encountered is that when the mouse is released outside of the <body>, the mouseup event does not trigger as expected. Th ...

javascripthtml

Detection of collisions using bounding sphere method

In Three.js, each mesh (THREE.Object3D) comes with useful properties like boundingSphere and boundingBox, along with methods such as intersectsSphere and isIntersectionBox. I initially thought I could use these for simple collision detection. However, I n ...

javascriptthree.jscollision-detectionbounding-volume

Getting the Kendo UI AutoComplete value onKeyUp within a ViewModel: A step-by-step guide

I'm facing an issue with the Kendo UI AutoComplete. I need to capture the value as the user types in order to send a query to the server for result filtering. The change event only triggers onBlur and not on keyup/down/press events. Additionally, the ...

jquerykendo-ui

Extracting individual elements from an array with Node.js or JavaScript

let array1= [ "home/work/data.jpg", "home/work/abc.jpg", "home/work/doc/animal.pdf", "home/work/doc/fish_pdf.pdf" ]; array1= array1.map((data)=>{ return data.slice(2,data.length).join("/"); }); console.log(array1); i am trying to modify my array by re ...

javascriptnode.jsarraysslice

Using Vuex to calculate the percentage of values within an array of objects and dynamically updating this value in a component

I'm currently in the process of developing a voting application with Vuex. Within the app, there are buttons for each dog that users can vote for. I have successfully implemented functionality to update the vote count by clicking on the buttons: sto ...

javascriptvue.jsvuex