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

Ensure the sum is recalculated whenever the input changes by using the jQuery change event

I am creating a system that requires the total values of multiple inputs to not exceed 100. I have successfully implemented this functionality, but now I need a way to automatically adjust the total if changing one input causes it to drop below 100. Here& ...

javascriptjqueryhtml

Implementing phone verification code delivery using ReactJS and Twilio client: Step-by-step guide

I've been scouring the internet for the past 8 hours and haven't been able to find a tutorial on using Twilio to send SMS messages with ReactJS. Does anyone know of a good tutorial for this? ...

javascriptnode.jsreactjstwilio

Assistance Required for Making a Delicious Cookie

Within my interface, there are two buttons displayed - one is labeled yes while the other is called no. <input type="button" name="yes" onclick="button()"> <input type="button" name="no"> In order to enhance user experience, I am looking to i ...

javascriptcookies

What is the best way to transform a list of Python+Flask objects into a list of JavaScript objects?

Here's a Flask application that showcases a list of objects. from flask import * app = Flask(__name__) class Entry: def __init__(self, name, surname): self.name = name self.surname = surname entries = [] entries.append(Entr ...

javascriptobjectflasktype-conversionjavascript-objects

Mongoose encountering an issue with undefined properties (specifically 'prototype') and cannot read them

I am currently using Mongoose 7.0.1 on Next JS 13.2.2 and React 18.2.0. After tirelessly searching for a solution to my problem, I am still struggling with connecting to a MongoDB. Every time I try to import mongoose into my project for the connection, an ...

javascriptnode.jsmongoosenext.js

PHP MySQL Table with a Date Range Filter

As someone who is new to PHP, I have a question. How can I set up a date range filter? I've looked at tutorials, but they haven't worked for me. I do have some code, but it doesn't include any functions. I want to implement this in a CRUD t ...

javascriptphpjquerymysql

I am experiencing an issue with my Node.js query, as it is not successfully adding a user to my database using

I'm currently working on developing an API using Node.JS, express, and MySQL with the Sequelize ORM. I wanted to do this project properly without relying on the CLI for every task. However, I've encountered a problem where my API fails to create ...

javascriptnode.jsexpresssequelize.js

Combining the powers of $.get and $.ready

Basically, I am facing an issue with my ajax call where sometimes it completes before the page is fully loaded. I attempted to use $( fn ) to wrap the callback function, but unfortunately, the callback does not trigger if the page is already loaded. Does a ...

javascriptjqueryajaxrace-condition

Align two tables horizontally in the center using HTML

Is there a way to center two tables side by side using CSS? I have been able to center a single table, but I am struggling to center two tables together. Can anyone provide a simple solution using CSS? Below are the codes I have used: @import url(ht ...

htmlcsshtml-table

Refreshing Bootstrap-Vue Table does not result in updating the table with table.refresh() method

I am facing an issue with a table that is supposed to be updating its data dynamically. The scenario is such that when a button is clicked in the parent component, a server call is triggered and a JSON file is loaded into a child component (the table) via ...

javascriptvue.jsbootstrap-vue

Displaying a specific division solely on mobile devices with jQuery

I need to implement a feature where clicking on a phone number div triggers a call. However, I only want this div to be displayed on mobile devices. To achieve this, I initially set the div to "display:none" and tried using jQuery to show it on mobile devi ...

javascriptjqueryhtmlcss

The height of the absolute div tag does not match the height of the parent div

I am currently designing an editor that requires a line-number bar (gutter) on the left side. I have set a div with a height of 100% and its parent div with overflow: auto. My expectation is that if the content exceeds the given height, the editor-body sh ...

csshtmlheight

JavaScript checkboxes not being recognized by Node element

Located on the left side of the page, there is a feature that allows me to include selected options in a list with the same name attribute. These selections will then be sent as part of the entire form to the Node backend. Most of the elements on the page ...

javascriptnode.js

The .SVC file's generated Javascript proxy URL fails to function properly when used with SSL

The ASP.Net web site I have deployed in IIS 7.5 includes a file named Cart.svc, which is used for accessing JavaScript from the browser. While the JavaScript functions fine without SSL, enabling SSL causes it to stop working. Interestingly, removing the / ...

asp.netjavascriptwcf

One Functionality on Button is Failing to Execute among Several Tasks

I've encountered an issue with one of the tasks triggered by a button click. The button successfully executes two out of three tasks (hides them on click), except for the last task which involves a text-blinking JavaScript function. I've used the ...

javascripthtmlscript-tag

Bringing in the component's individual module

I encountered the error message in my Angular application - Can't bind to 'formGroup' since it isn't a known property of 'form' - and managed to resolve it by including the import import { AddEditModule } from './add.edit ...

javascriptangularimport

Fix the positioning of a div in BootStrap and CSS code

Hey there, I'm relatively new to CSS/Bootstrap and currently in the process of learning. I might need to incorporate some CSS into the "chat_funcs" div, but unsure about what code to input to achieve my desired outcome. The issue at hand: What I am ...

htmlcsstwitter-bootstrap

Transmit the bound data (using ng-model) to a custom AngularJS directive

/*I am looking to define the maxDate as vmEndDate*/ app.directive('myDatepicker', function ($parse) { return function (scope, element, attrs, controller) { var ngModel = $parse(attrs.ngModel); alert(element.va ...

javascriptangularjs

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

I'm encountering the ExpressionChangedAfterItHasBeenCheckedError due to my getter function, selectedRows, in my component. public get selectedRows() { if (this.gridApi) { return this.gridApi.getSelectedRows(); } else { return null; } } ...

javascripthtmlangulartypescript

A menu offering interactive features such as hover effects, click functionality, dynamic class changes, and

Take a look at the latest simplified code snippet below, which I hope will benefit someone: $("#menu").find("a").hover(function(){ $(this).addClass("active"); },function(){ $(this).not(".clicking").not(".selected").removeClass("active"); }); $ ...

jqueryajaxmenuclickhover