Struggling to Conceal a Webpage: Using Position Absolute and Fixed Disrupt Layout

I am currently in the process of developing a loading image that will overlay a page when a call is initiated.

My tools for this project include handlebars, HTML, CSS, and JavaScript.

In my .hbs file, the structure resembles the following:

<div id="spinner"></div>
<div class="special-container"></div>
<div class="special-container"></div>

The JavaScript code populates the spinner and special containers with content. For demonstration purposes, let's refer to them as "spinner" and "special-container".

Within the spinner div, the following content is inserted:

<div id="mask">
    <div id="spinner">
        Hello world I am the spinner page
        <span class="icon icon-house margin-right-10" ></span>
    </div>
</div>

My CSS styling is stored in a .less file structured like this:

.special-container {
  max-width: 1170px;
  position:absolute; 
}

#spinner {
  position: relative;
  z-index: 100;
}

Upon rendering the page with the initial code, the spinner appears above the two special containers which are stacked on top of each other. However, adjusting the CSS results in either the spinner being displayed incorrectly or the special containers overlapping each other.

The goal is to have the spinner centered on the page and responsive to resizing without sacrificing the stacking order of the elements. Despite referencing solutions online, such as positioning recommendations, the issue remains unresolved.

Positioning Without Styling: Spinner Div2 Div3

Positioning With Styling: Spinner/Div2/Div3 (Spinner on top)

The challenge lies in understanding why applying positioning causes the layout to distort and how to rectify this behavior.

What impact does positioning have on the design? How can this be addressed without compromising the desired display?

javascripthtmlcsshandlebars.js

Answer №1

Here is the solution:

The important step is to eliminate the z-index from the current page and rather place it within divs nested in the spinner.

Within the spinner, the HTML structure looks like this:

<div id="mask">
     <div id="innerObj">
</div></div>

I have removed the following CSS styles:

.special-container {
  max-width: 1170px;
  position:absolute; // I have also tried position:fixed;
}

#spinner {
  position: relative;
  z-index: 100;
}

Instead, I have added new CSS styles for the inner elements:

#mask {
  position: fixed;
  z-index: 1;
  background: rgba(192,192,192,0.3);

}
#innerObj {
  position: relative;
  z-index: 100;
}

This adjustment has proven to work effectively.

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

What is the best way to align a submit button and select option in a row within a form using Bootstrap?

I'm having trouble aligning a submit button to the right within a Bootstrap form. I've experimented with float-right, text-right, and align="right", but none of them seem to be working. Below is the code snippet: <!DOCTYPE html& ...

htmlcss

Syncing up text and icon in a single row using Angular CSS

I am working on a section with a grey row that will have both text and icons. Currently, my code looks like this: {{ trans.dashboard.settings.car.Name| translate }} <i class="fas fa-caret-up"></i> While this works, I want the text to ...

htmlcssangular

The clip-path in Div: Css is malfunctioning and not displaying correctly

I am trying to create a chat bubble using CSS with rounded corners and a bottom-right arrow. However, I am having trouble getting the arrow to display correctly. https://i.stack.imgur.com/gVXOV.png The CSS styling for the chat bubble is as follows: ...

htmlcss

Can you incorporate PHP variables into your JavaScript code?

Similar Question: passing variables from php to javascript I am working on dynamically generating a list where each row should have hover effects and be clickable to a specific link. The goal is to pass the ID of the content in each row through the li ...

phpjavascriptjqueryajax

How can I align the text in a dropdown menu to the center on Safari?

How can I center the option text in a drop down menu using CSS? display: block; height: 60px; margin-left: 10%; margin-right: 10%; margin-top: 10px; min-height: 60px; text-align: center; The option text is centered in Firefox browser, but not in Safari. ...

javascripthtmlcsssafari

Mastering event listening in Nodejs: Best practices for handling events between objects

Currently facing the challenge of having an object that needs to listen on another object. The dilemma is: what is the best approach for handling this subscription? My current understanding suggests two possible methods: Using a registrator: var Registra ...

javascriptnode.jsdom-eventspublish-subscribecommonjs

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

javascriptjqueryhtmlcss

Exploring the efficiency of AngularJS when binding to deeply nested object properties

Are there any performance differences to consider when data binding in Angularjs between the following: <div>{{bar}}</div> and <div>{{foo.bar}}</div>? What about <div>{{foo.bar.baz.qux}}</div>? Our team is working o ...

javascriptperformanceangularjsdata-binding

CORS error: The 'Access-Control-Allow-Origin' header is missing

I have a website that is being accessed through multiple domain names. Let's say the main hosted website is example.com and the forwarded domain names are example-x.com, example-y.com, example-z.com When visitors access the forwarded domains, there ...

javascriptajax.htaccesscors

The result obtained from response.download() is saved as a blob that may contain undefined elements

I am in the process of developing a client-server certificate generator. In terms of the Backend, I have set up two endpoints: / This endpoint receives a JSON containing extracted data from inputs, sanitizes them, and determines if they are valid or not ...

javascriptnode.jsexpress

Troubleshooting: Why is Jquery window.location only refreshing the page instead of redirect

Here is a snippet of code that I am working with: // General search $j(".search").each(function () { var baseURL = "/search.aspx?c=Entire%20Site&q="; var searchBox = $j(this); searchBox.find("input").keypress(function (e) { if (e.k ...

javascriptjquery

Develop a precompiled library for Angular applications that utilizes Ahead-of-Time (AOT) compilation technology

My Angular 5 library is packaged for consumption by other apps in their node_modules. Currently, the app is compiled Just-in-Time(JIT) using rollup and gulp. I export it as a package, and developers use it in its JIT compiled form. After researching AOT ...

javascriptangularangular5angular2-aotaot

Instructions on how to implement a readmore button for texts that exceed a specific character length

I am attempting to display a "Read more" button if the length of a comment exceeds 80 characters. This is how I am checking it: <tr repeat.for="m of comments"> <td if.bind="showLess">${m.comment.length < 80 ? m.comment : ...

javascripttypescriptaurelia

What is the best way to display the total using Vue.js?

Feeling frustrated with a shopping cart that refuses to calculate the total price of my items. I can't figure out what I am doing wrong. I've created a function in my Vue object to add up the totals if an item is added to the cart, but it seems l ...

javascripthtmlvue.jscart

The TypeScript compilation failed for the Next.js module

Working on a project using Next.js with typescript. The dev server was running smoothly, and I could see frontend changes instantly. However, after modifying the next.config.js file and restarting the server (later reverting the changes), compilation issue ...

javascripttypescriptnext.jsbabeljs

Hover effect that transforms every element of the same kind except for the one that is currently being

Is it possible to create a hover effect that changes not only the hovered "a" tag but also other "a" tags? Currently, I can only achieve the desired effect on the selected hover. ul li{ list-style: none; } ul li a { color: black; } ul li a:hover{ ...

css

Determine the number of occurrences of specific values within a group of objects based on a

I have the following dataset: const data2 = [ { App: "testa.com", Name: "TEST A", Category: "HR", Employees: 7 }, { App: "testd.com", Name: "TEST D", Category: "DevOps", Employee ...

javascriptarrays

Creating a File and Resource Manager for Your Express Application: Step-by-Step Guide

I'm interested in creating a website section where users can upload files, such as game mods, for others to download. I envision this section being able to handle a large volume of files and users. How can I achieve this scalability and what architect ...

javascriptnode.jsrestexpress

Discover the best way to highlight a specific area using imgareaelect

The code snippet provided is for uploading an image and performing some operations on it using jQuery UI Tooltip. The code includes various scripts and stylesheets to handle the image upload functionality. After uploading an image, the code checks if the ...

javascriptjqueryhtml

NuxtJS is unable to load multiple CSS sheets that contain variables

Currently in the process of creating a blog with NuxtJS. You can find my repository here. Additionally, I have raised this issue on the Nuxt repository as well, which you can view here. The main issue at hand revolves around loading style sheets in my con ...

javascriptcssstaticvue.jsnuxt.js