How can z-index and relative positioning be used to center a button with jQuery and CSS?

One issue I am facing is with a button that is located in the center of another div (container). When the button is clicked, some hidden divs appear within this container. Although they are present but initially set to display: none using CSS, and then shown using jQuery.

However, when these divs are displayed, the button is pushed out of the container. I know this is happening due to the layout, but I was thinking of using z-index to prevent it from moving?

Can you suggest a way to keep the button in place without resorting to using position absolute?

I prefer not to use position absolute because I want the layout to remain responsive. Using absolute for the button messes up the responsiveness. If this approach doesn't make sense, please let me know!

View jsfiddle demo

CSS

#button {
    height:40px;
    width:100px;
    margin: -20px -50px;
    position:relative;
    top:50%;
    left:50%;
    z-index: 30;
}
#container {
    z-index: 2;
    height: 424px;
    width: 424px;
    background: black;
}
div.square {
    background: gray;
    padding: 0;
    margin: 3px;
    display: none;
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    z-index: 4;
}

HTML

<div id="container">
    <input type="button" value="show" id="button"></input>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

JS

$('#button').bind('click', function () {

    $('.square').show();

});

Answer №1

By adjusting the relative position of the button to -105px, you can achieve this without using absolute positioning.

$('#button').on('click', function () {

    $('.square').show();
    $(this).css('left', '-105px');

});

http://jsfiddle.net/eykmvo/zQrLh/3/

Answer №2

When it comes to absolute positioning, the key is ensuring that the element remains within the viewport to maintain responsiveness. In this case, using absolute positioning in relation to the #container element does not compromise the overall responsiveness of your demo.

http://jsfiddle.net/yRGrL/4/

#button {
    height:40px;
    width:100px;
    margin: -20px -50px;
    position: absolute; /* modified */
    top:50%;
    left:50%;
    z-index: 30;
}
#container {
    z-index: 2;
    height: 424px;
    width: 424px;
    background: black;
    position: relative; /* added */
}
div.square {
    background: gray;
    padding: 0;
    margin: 3px;
    display: none;
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    z-index: 4;
}

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

Is it possible to leverage the className attribute in Material UI components?

Currently using React alongside Material-UI(MUI) for the frontend development. Encountering an issue with the Button Component in MUI, specifically the className prop. Struggling to apply custom styles using classes defined in the style.css file. Conside ...

The colorbox division refuses to be shown

Having trouble revealing a hidden div within a colorbox upon click I'm stumped on how to make the div visible inside the colorbox The div is currently hidden, but I need it to be shown when displayed in the colorbox <div class="test">test< ...

When printing a table in HTML/CSS, only the header will appear on the empty page

I'm struggling to figure out why there are two pages, one blank and one with just the table header in this document. The content looks fine otherwise, but I can't seem to remove these extra pages. Here is the full HTML code: <!DOCTYPE html& ...

When making a jQuery AJAX call, the returned results may be displayed before the page headers, causing

I'm struggling to figure out why I keep encountering a parse error in my simple AJAX call using JSON. The resultText is displaying the full page source code instead of just the JSON response, showing "success" above the page headers. Below is the AJA ...

Steps for setting the value of a textbox within a bootstrap popover

When a user clicks on an Anchor element, I am displaying a Bootstrap popover using the following JQuery code. Jquery $("[data-toggle=popover]").popover({ trigger: 'click', placement: "top", html: true, ...

What is the process for identifying the ActiveX control being referenced on a webpage?

After developing a web application using ASP.NET Web Forms, I encountered a challenge with a client who has strict security policies. Whenever they try to access the web page, Internet Explorer displays a message stating: Your security settings do not all ...

Why isn't my jQuery click event triggering?

Visiting this PAGE and scrolling down, you'll find the following code snippet: HTML <ul class="play_navigation"> <li class="active"gt;<a class="barino_story_bottom" href="#">The Story</a> ...

Managing the challenges of handling numerous AJAX post errors stemming from multiple form submissions

I am currently developing a PHP application that will be used to present multiple choice questions as well as text-based questions. The functionality I have implemented involves using Javascript code to submit user responses via ajax to the PHP server. He ...

How can Rails correctly render a custom JSON format for dates?

What is the best way to format a custom JSON object containing dates in Rails so that it can be easily converted into a Date object using jQuery? I am currently facing issues where the date string I am trying to convert, such as "2011-12-14 00:59:59 +01:00 ...

Clicking on a radio button will update the text within a span

Can jQuery AJAX be used for this task? I am looking to update the content of a <span> when a radio button is clicked. <input class="unitSelectInches" type="radio" name="units" value="inches" />Inches <input class="unitSelectCenti" type="ra ...

Leveraging two AJAX requests within a single function

I am working on creating an ajax function to post data that I've retrieved using another ajax function. While I have figured out how to use a callback function, I am struggling with passing the data from one function to the other. Here is what I have ...

It appears that my array is not being properly populated by my callback functions

I am encountering an issue with my callback functions. The objective of my code is to send 16 GET requests to a REST API in order to retrieve 16 distinct JSON files. These JSON files are then supposed to be converted into dictionaries representing the foot ...

Unable to eliminate the default styling of Material UI table using an external CSS file

Currently, I am incorporating a Material Ui table into my project. My goal is to eliminate the border and adjust the padding of the table. Upon investigation, I came across a default className for material ui table known as MuiTableCell-root-40. Below is t ...

What is the best way to deactivate a button when not all inputs require filling?

I need to make a change in my form where I want to disable a button, but not all the inputs are mandatory. Even though I have specified which inputs need to be filled in the code, I still have to fill all the inputs in the form. How can I modify this? $ ...

Enhancing Symfony's performance through optimized Ajax response time

When using Symfony2, I am experiencing differences in loading times for AJAX requests between development and production environments. In development, it takes 1 second to load, while in production it only takes 500 milliseconds for a simple call: Here is ...

This issue with the jQuery function requires a double-click action to

During your visit to our website , you will notice a navigation bar at the top that can be either hidden or expanded. When the navigation bar is expanded (by default), it requires two clicks to minimize it, although it appears to only respond to the first ...

Is it possible to simulate a 'click' on the pageAction button within a Chrome extension using programming?

I created a Chrome extension that includes a pageAction button. When the user clicks on this button, a popup.html window appears for them to take action. Is there a method to style a link on the page in a way that when clicked, it automatically triggers a ...

Is it possible for HTML/CSS styling for print, background color, and image not to display in both IE and Firefox?

Is there a way to display the background color and image when printing? I understand this is typically controlled by browser properties, but I'm looking to customize it with CSS. For example, on webkit, I use -webkit-print-color-adjust: exact;. How ca ...

How to Use jQuery Post Method to Submit a Form Without Redirecting

I am looking to enhance the user experience of my form by preventing it from reloading upon submission. Specifically, I want to trigger the call to index.php when the submit button named "delete-image" is clicked in the scenario outlined below. It's i ...

Tips for designing a webpage where a div element adjusts to fit the screen, regardless of the width of the content inside

Can CSS3 or a JavaScript library be used to create a webpage with a div that contains content wider than the screen, such as a large image or newsletter, and still fits it to the screen without scrolling or clipping any content? Below is an image demonst ...