What is the best way to stack two elements that are absolutely positioned on top

HTML

<div class="btn" >
            <span>X<span>
            <div class="vertical_line"></div>
</div>

CSS

div.btn{
        width:100px;
        height:100px;
        float:left;
        border:1px solid #000000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:80px;
        text-align:center;
        position: relative;
    }
   div.vertical_line{
        width:0;
        height:100px;
        border:1px solid #000000;
        position:absolute;
        right:50px;
        z-index:100;
        margin:0;
        padding:0;
    }
    div.btn span{
        position:absolute;
        z-index:0;
    }

If you want to know how to center the 'X' in such a way that it overlaps with the vertical line, check out this jsfiddle.

htmlcss

Answer №1

To achieve a centered text effect, I opted for giving the line absolute position instead of the span text. The text is now aligned in the center using 'text-align: center'.

 div.square{
        width:120px;
        height:120px;
        float:left;
        border:1px solid #000000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:80px;
        text-align:center;
        position: relative;
    }
   div.vertical_line{
        width:0;
        height:120px;
        border:1px solid #000000;
        position:absolute;
        right:59px;
        z-index:100;
        margin:0;
        padding:0;
        top : 0;
    }
    div.square span{
        float:left;
        width : 100%;
        text-align : center;
        z-index:0;

    }

Answer №2

Revise your code with the following updates

HTML

<div class="button" >
    <div class="vertical-bar"></div>
    <span>X</span>
</div>

CSS

div.button{
    width:120px;
    height:120px;
    float:left;
    border:1px solid #333333;
    font-family:Arial, Helvetica, sans-serif;
    font-size:80px;
    text-align:center;
    position: relative;
}

div.vertical-bar{
    width:2px;
    height:120px;
    border:1px solid #333333;
    position:absolute;
    right:50px;
    z-index:100;
    margin:0;
    padding:0;
}

div.button span{
    position:relative;
    z-index:0;
}

Confirm: Does this align with your requirements? https://jsfiddle.net/y9d25gxq/9/

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

having difficulty placing 3 pop-up windows on a single page

Struggling to implement multiple popups on my page, each with a unique ID assigned. Any assistance would be greatly appreciated. Here is the code snippet: .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { font-size:20px; t ...

javascripthtmljquerycss

How can the "Search within page" feature locate words that are divided between different elements?

I need to present text in groups of a specific length while still being able to search for text that spans multiple groups on the page. Additionally, I want to include a character above each group. My current approach is as follows: body { marg ...

htmlcss

Steps to turn off a Material UI CSS class for an element universally

Utilizing the Material UI Typography element with the css class MuiTypography-h1, I am seeking to globally disable its usage throughout the entire codebase. <Typography variant="h1" sx={{ width: '100px', height: '55px ...

javascripthtmlcssreactjsmaterial-ui

Increase the value on the x-axis by 10 units instead of just 1

Currently in my highcharts setup, the x-axis is being incremented by 1: The default axis values are 1,2,3,4,5,...,200 However, I wish to change this to have values like: 10,20,30,40,50,...,2000 This means I need to increment the x-axis by 10 instead of 1. ...

javascripthtmlchartshighcharts

Choosing items from an HTML list using `<li>` to trigger PHP programs

Encountering a bit of a challenge with the layout on my index.php page, here are my objectives that I believe can be achieved using HTML. I want the menu list to appear on the left side and when an item is selected, it should display corresponding PHP pr ...

phphtmlcss

Scrollbar appearing in Safari (Windows) despite increasing the height

While working on a website for a client, I encountered an issue where a section within the footer is causing scrollbars to appear. Despite adjusting the height of the wrapper and setting overflow to hidden, the scrollbars persist. Is there anyone who can ...

htmlcss

Having trouble with JavaScript not working when clicking an image and toggling a div?

Why isn't the onclick image and toggle div functionality working with JavaScript? I made the change from: <input type="button" id="Showdiv1" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" /> to: <img src="https://d ...

javascripthtmlcss

Utilizing an 'onclick' confirmation function with PHP in HTML

Hey there, fellow members of the coding community! I'm currently working on a project where I need to create a menu that displays all clients with an option to delete them. When a user clicks on the delete button, I want a confirmation message to pop ...

javascriptphphtmlonclick

Switching the background image with a single click and reverting it back with a double click using jquery

I am working on a project with multiple div elements which need their background images to change upon clicking and revert back to the original image when clicked again. Below is the CSS code for one of the divs, including its Class and ID: .tab_box { wid ...

jquerycssimageonclicktoggle

Alter the HTML of the contact form following validation and successful email delivery

I am currently developing a PHP-based contact form for my website. I want to replace the HTML content only after the submit button has been clicked and the email has been successfully sent. Currently, the HTML gets replaced before any validation or sending ...

javascriptphpjqueryhtmlajax

Tips for aligning text to the right within a div using the "justify" text-align property

I want the final sentence of my content to be aligned to the right side while the rest remains justified. I attempted using a <span> within a <p> tag, but it did not work as expected: span.activity-conclusion { font:22px 'Open Sans ...

css

Insert a section of background within the div

Does anyone know how to create a div with a partial background like the example shown here? https://i.sstatic.net/CDqCe.png I attempted to add white margin, but I'm struggling to get it right. ...

htmlcss

Obtain the YouTube video identifier from a YouTube embedded link

Is there a way to extract just the YouTube ID from a given URL? https://www.youtube.com/embed/cqyziA30whE?controls=1&showinfo=0&rel=0&autoplay=0&loop=0 $(".youtube").click(function () { console.log(this.href.replace(new RegExp("em ...

javascriptjqueryhtmlregex

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Currently, I am working on a project that involves multiple spans placed side by side, with each span containing a letter of the text. My aim is to create a functionality where hovering over one of these spans will not only hide that particular span but al ...

javascripthtmlcss

Overflowing Padding and Margin in Bootstrap Card Column

Is there a solution to prevent padding overflow in the Bootstrap Card Column when trying to split a dictionary of items into three columns? The issue is that the padding from bottom rows spills into the top of the next column (refer to col1->col2). Vie ...

htmlcssbootstrap-4card

What is the best way to include a scroll bar in a calendar day when the content exceeds the predefined height limit?

My goal is to create a calendar with fixed width and height, where if the content within a day exceeds the allotted space, a scroll bar will appear inside that specific day. I have been attempting to restrict the height of each day on the calendar, but al ...

javascripthtmlcss

Utilizing dual <legend> elements within a fieldset

I am attempting to include two legends within a fieldset. The first legend consists of an image in the center of the fieldset, while the other legend should be another image aligned to the very right side of the fieldset. The code snippet below demonstrate ...

htmlcsscss-position

Tips for resizing a browser window using an HTML element

I decided to add a unique feature to my website - a handle in the bottom right corner that users can grab and drag to the left to see how the design adapts to different browser window sizes (Responsive Design). To implement this, I included the following ...

htmlcssbrowserwebkitresponsive-design

Using Ajax to Prevent Duplicate Form Submissions

In the legacy application I am working with, they have implemented Ajax form "submits" using [a] tags. If we were using [input] buttons, we could easily disable them by setting the disabled attribute. However, when it comes to hyperlinks, disable is not pa ...

javascriptjqueryhtmlajaxhyperlink

Dynamic resizing container

For most of my websites, I typically place content within a div that features rounded corners with a shadow effect. Recently, I've been trying to figure out if it's possible for this parent div to automatically center both vertically and horizont ...

htmlcss