Is the z-index useless when the button is positioned behind divs and other elements?

I would like the "Kontakt" button to appear in the top right corner of the page, always on top of everything else. I have tried setting the z-index to z-index: 99999999999 !important;, but it doesn't seem to be working...

On desktop, the button displays above everything except the footer at the bottom of the page. However, on mobile devices, the button is hidden behind other content. Feel free to check it out for yourself...

Any ideas on why this is happening and how I can resolve it? You can view the site here:

Code:

<button onClick="location.href='#kontakt'" type="button" id="kontakt_button" class="cl-popup-trigger type_btn cl-btn">Kontakt</button>

Best regards

javascriptjqueryhtmlcss

Answer №1

Simply insert your button code directly within the body tag.

Answer №2

Your implementation of the Z-index property is spot on. However, there seems to be an issue in the CSS file named "us-base.min.css". The problem lies within the "l-canvas" class where the property "overflow: hidden" is causing it to become invisible. To resolve this, simply remove the mentioned property. If needed, consider using it as follows: "overflow-x: hidden; overflow-y: visible;" Keep up the great coding work!

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

Incorporating jQuery ajax requests into divs seamlessly to avoid any page disruptions

When loading numerous ajax calls on a page, the timing of each call varies, resulting in some content loading before the user reaches the top of the page. This may cause the user to miss viewing certain data unless they scroll back up to the top. Below is ...

javascriptjqueryhtmlajax

Struggling with making changes to a instantiated "this" object within a pseudo javascript class

If you scroll down to the bottom of this post, you'll find a workaround or possible solution. I've been grappling with understanding how pseudo classes work together to achieve the task I'm attempting (explained in the code below). It might ...

javascriptnode.jsmoduleexpresscommonjs

npm is consolidating all dependencies and their sub-dependencies into a single unified directory

My project has a package.json file with approximately 20 dependencies. Upon running npm install, all the dependencies and sub-dependencies end up in the main node_modules directory, resulting in hundreds of modules rather than just my intended 20. The sub- ...

javascriptlinuxnode.jsnpm

Choosing an option from a dropdown menu does not trigger the execution of an AngularJS function through Selenium

Currently, I am attempting to create a Selenium test that involves selecting an item from 2 dropdown menus and then clicking a button. However, I have encountered an issue where the second dropdown menu is populated based on an angularjs call depending on ...

javascriptangularjsseleniumselenium-webdriver

Comparison of Grant and Passport.js: Which One to Choose?

Are you unsure about the distinctions between Grant and Passport.js? How do you decide when to utilize Grant over passport.js, and vice versa? If your goal is to create a social media platform that tracks user activities and posts them on a news feed, whi ...

javascriptnode.jsexpresspassport.js

Redux-form fails to retrieve the value of the SelectField

I'm trying to work with a simple form using react and redux-form. My goal is to gather all the field values from my form and send them to my RESTful API using jQuery ajax. Unfortunately, I've run into an issue where redux-form doesn't seem ...

javascriptreactjsreduxmaterial-uiredux-form

Rows in the table mysteriously vanish when you switch to the following page

I am a beginner with React and I am currently using an addrow method to populate a table that I created using {this.state.rows.map}. The table successfully displays the values from the input fields. However, when I navigate away using the continue button a ...

javascriptreactjsreact-reduxreact-routermaterial-ui

Tips for adjusting a pre-filled form?

When a form is rendered by onClick from a component, it loads with values. I want to be able to edit these current values and then perform an update operation. Here is the link to the sandbox: https://codesandbox.io/s/material-demo-forked-e9fju?file=/demo ...

javascriptreactjsmaterial-ui

Here is a unique version: "Dealing with Node.js ES6 (ESM) Modules in TypeScript can be tricky, especially when the TypeScript Compiler (TSC) fails to emit the

I am facing an issue while transpiling my TypeScript project to JavaScript. I have set the project to resolve as an ES6 Module (ESM) by using the "module":"ES6" configuration, but the problem persists. This is the current setup in my ...

javascripttypescriptmoduleconfigurationes6-modules

I attempted to log the elements of my submit button form, but unfortunately nothing is appearing in the browser console

I am attempting to capture the data from my submit button form, but for some reason, nothing is showing up in the console of my browser. $("#signupform").submit(function(event){ // Stopped default PHP processing event.preve ...

javascriptjquery

Tips for designing a Quasar page that dynamically loads content as the user scrolls

I am attempting to develop a component that will render multiple elements as the page is scrolled. I am utilizing the Quasar framework for Vue.js. Below is the code required to render a single block containing information from a JSON file: Quasar comes wi ...

javascriptvue.jsquasar

Understanding the Parameters for discord.js Slash Commands

I am currently working on a calculation that involves using parameters input through a slash command. While entering the parameters works without any issues, I am facing difficulty in retrieving them. The current code is resulting in an error TypeError: ...

javascriptdiscorddiscord.js

A plethora of color choices in a Multi-select Box

Hi there! I am facing an issue with dynamically adding multiple select boxes. Currently, I have 4 color-coded options under the selection boxes, which work fine when there is only one box. However, when I add more than one select box, the color coding doe ...

javascriptjqueryhtmlcss

Populating a span tag with data retrieved through Ajax

I encountered an issue with updating the totalDraftSalePrice HTML tag after a successful AJAX call. The data returned includes a field called SubtotalBasePrice, which I can visualize in JSON format, but for some reason, I am unable to update the HTML tag w ...

javascriptjqueryajaxrazor

Troubleshooting ECONNREFUSED in NextJS API: App successfully runs in both deploy and development mode, but encounters issues when next build is executed

Detailing the Glitch I've developed an application using NextJS that incorporates an internal API, utilizing the getStaticProps methods to interact with the API. You can access the live app at this link: Additionally, you can find the project' ...

javascriptreactjsbuildnext.jsvercel

A method for consolidating multiple enum declarations in a single TypeScript file and exporting them under a single statement to avoid direct exposure of individual enums

I am looking to consolidate multiple enums in a single file and export them under one export statement. Then, when I import this unified file in another file, I should be able to access any specific enum as needed. My current setup involves having 2 separ ...

javascriptreactjsangulartypescriptenums

Don't forget to keep track of when the user has closed

How can I ensure that the cache retains the user's action of closing the div? Currently, when I close the div and refresh the page, it reverts back to its original state. Is there a way to make this change persistent? Experience it live: Here is the ...

javascriptjqueryhtmlcsscaching

Tips for navigating to an element with Nightwatch

I am currently using nightwatch for end-to-end testing of my application. One of the tests is failing because it seems unable to scroll to the element that needs to be tested. I am wondering if scrolling is necessary, or if there is another workaround. Her ...

javascriptselenium-webdrivernightwatch.js

initiate a POST request using fetch(), where the data sent becomes the key of

Encountered an issue with sending a POST fetch request where the JSON String turns into the Object Key on the receiving end, specifically when using the { "Content-Type": "application/x-www-form-urlencoded" } header. I attempted to use CircularJSON to res ...

javascriptreactjsexpresspostfetch

Avoid a column from expanding according to its content by utilizing the grid-template property

Exploring the world of Css Grid, I'm delving into creating a unique layout with the grid-template Property: main{ width: 1444px; height: 70vh; display: grid; grid-template: 'cas cas cast' 'cas cas cast' ...

csscss-grid