What is the best way to achieve text elements overlapping each other in CSS?

Imagine having the following HTML:

<div>
  hello
  <div>hello</div>
</div>

Wouldn't it be cool if those two texts overlapped perfectly in the center? It doesn't matter which one overlaps the other.

Do you think it's possible to achieve this with CSS?

The best I could come up with is:

<div style="position: relative; margin: 0 auto; text-align: center; width: 0">
  hello
  <div style="position: absolute; text-align: center">hello</div>
</div>

Unfortunately, this code ends up stacking one on top of the other instead of aligning them in the center.

We appreciate your help!

css

Answer №1

To enhance the appearance of the inner div, you can include the following CSS: top: 0; width: 100%

<div style="position: relative; margin: 0 auto; text-align: center">
    hello
    <div style="position: absolute; top: 0; width: 100%">hello</div>
</div>

The unnecessary width: 0 property on the outer div has been removed.

Check it out here: http://jsfiddle.net/thirtydot/Xprtd/

Answer №2

Compatibility tested on various browsers such as IE, Firefox, and Chrome.

<div style="background:blue;position: relative;text-align:center;width:100%;">
    <div style="color:Purple;position:relative;">hi there
        <div style="position:absolute;top:0;width:100%;">hi there</div>
    </div>
</div>

Answer №3

Include the CSS rule top:0px; to the second div...

Answer №4

Consider providing both elements with the same width, such as setting outer-width to auto and inner-width to 100%.
Don't forget to also include left:0;top:0 for the absolutely positioned div.

Answer №5

The appearance of the second div is not important.

website

<div class="designDiv">
  hi
  <div>hi</div>
</div>

CSS

.designDiv {
    line-height: 4px; /* Set to 0px for complete overlap */
    text-align: center;
}

Next, modify the line-height

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

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...

javascriptcssajaxhtmldom

Please enter the text in the field provided at the bottom using IE10

Why is the text inside my input appearing at the bottom in IE10, while it displays in the middle on FF and Chrome? http://jsfiddle.net/PXN2e/2/ input.form-text { color: #999999; font-size: 14px; height: 30px; line-height: 30px; paddin ...

htmlcssinput

Modify the input value when using the get_search_form() function in Wordpress

After experimenting with the latest get_search_form() function in WordPress, I've encountered an issue where I can't figure out how to remove the text label from the search submit button. Does anyone have any suggestions or solutions for this pr ...

csswordpressinputsubmit

Troubleshooting problem with text overlaying images upon hovering in CSS

Several months ago, I successfully implemented a cool effect on a Shopify website that I had designed. However, recently the client decided to switch to a new theme without my knowledge, and now one of my CSS tricks is no longer working. If you look at t ...

htmlcsshovercentering

`The problem of div width error``

I am trying to display two divs side by side with a width of 50% each. Below these two divs, there is another div with a full width of 100%. Check out my code below: <div class="col_1_2"></div> <div class="full-description">description& ...

htmlcss

HTML: Base64 image not displaying properly due to incorrect height specification

I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag: style="height: 300px;" it shows correctly. Ho ...

javascripthtmlcssimagesvg

Two HTML elements positioned alongside each other with inline word wrapping

Apologies for the vague question title, which may not accurately reflect my requirements. This is one reason why I am struggling to find a solution through a simple Google search - I'm unsure of what terms to use. I am attempting to align some "label ...

htmlcsslayout

Tips for determining the width of an image and utilizing that measurement as the height in order to create a balanced square image

I am currently facing an issue with my code that is used to retrieve the width of an image which is set in percentages. Although I am able to obtain the width in pixels, I am struggling with correctly inserting the variable into the CSS property value usin ...

javascriptjqueryhtmlcssvariables

Utilizing CSS Grid to arrange child elements inside their respective parent containers

I am currently working on a grid container that contains multiple divs. Each div houses different elements such as headings, paragraphs, buttons, and logos. I have utilized Flexbox to evenly distribute the logos across the container's width. However, ...

javascripthtmlcssflexboxcss-grid

Troubleshooting: Why are my Angular 8 Carousel Slide Animations not functioning

Looking to create a carousel slideshow with images sliding from right to left and smoothly transition to the next image. All the necessary code can be found in this STACKBLITZ Here is the HTML snippet: <ngb-carousel *ngIf="images" [showNavigationArro ...

htmlcssangulartypescript

Uppercase the initial letter in a term to indicate a standard condition

I'm struggling to override the CSS in material UI. Even though I tried capitalizing both words, it only changes on selected and hover states, Is there a way to change it in the normal state as well? I've tried debugging but can't seem to fin ...

javascripthtmlcssreactjsmaterial-ui

Using CSS, create a layout with a small 2x2 box positioned beside a larger 2x2 box

https://i.sstatic.net/nC2PI.png Can a flexible ul li structure be achieved with flexbox? I attempted to set the width of the squares to 25% and make the 1st, 3rd, or 5th one 50% wide using a combination of float:left, clear[left|right], but the last squar ...

htmlcss

Triggering scroll snapping in CSS based on a different user action than just scrolling

Take a look at this example: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css Try this to recreate the issue: Click on the input at the top Scroll to the bottom, then click on an empty area Observe how the screen jumps back up to the top ...

css

Showcase your skills in CSS, HTML, and Javascript

I attempted to search for something similar but came up empty-handed. I have two buttons. When I click one of them, I want to hide a certain division, but it's not working as expected. The divs d2 and d3 are initially hidden when the page opens, whic ...

javascripthtmlcss

PHP database results placed one on top of the other

My current code snippet looks like this: while ( $row = mysqli_fetch_assoc($result) ) { echo '<div class="leaders" style="background-color:#ada30a;">' . $row['playername']; echo "<br>"; echo $row['points&a ...

htmlcss

Text vanishing upon the loading of an HTML webpage

I am experiencing an issue where the text on my webpage disappears after it loads, and I am struggling to figure out the cause. (I did not create the site) The white text displayed on top of the header image initially appears correctly but then vanishes. ...

jqueryhtmlcss

Exploring the fundamentals of Django with a touch of creativity in CSS

As a newcomer to Django, I am currently working on setting up a basic Django application. I have progressed to chapter 5 in the Django online book: Before delving into databases, my goal is to incorporate some simple CSS and JS directly into the applicat ...

cssdjango

Create Stunning Half-Brick Image Layouts Using HTML and CSS

Can anyone offer advice on creating complex image layouts such as the half-brick pattern using HTML, CSS, and jQuery? I am looking to be able to rotate and scale the image as well. The background-image CSS property does not seem to support scaling. I have ...

jqueryhtmlcssimagelayout

What might be causing the invisibility of a particular div element?

Here is the layout in the div element: <div class=" wrap clear"> <div class="block pink float"></div> <div class="block blue float"></div> <div class="block orange float"& ...

htmlcss

Spacing issues with inline-block elements when dealing with a large quantity of items

Currently, I am tackling the JS/jQuery Project for The Odin Project and I am confident that my solution is working exceptionally well. However, the issue I am facing is that when dealing with larger amounts of elements (around 40-45 in JSFiddle and 50-52 ...

javascriptjqueryhtmlcss