What causes the text node to be visible on top of the background of the element it is overlapping with?

Consider this basic HTML structure:

div {
    box-sizing: border-box;
    color: white;
    font-size: 28px;
    height: 100px;
    width: 200px;
}

#a { background: blue; padding-top: 40px; }
#b { background: green; margin-top: -100px; }
<div id="a">a</div>
<div id="b">b</div>

In this scenario, element b completely covers element a, yet the letter "a" is still visible. Why is that happening?

I have reviewed the stacking order rules at https://www.w3.org/TR/CSS2/zindex.html but couldn't find an explanation.

Could the text node be positioned differently? What am I overlooking?

Check out the Codepen demo I made here: https://codepen.io/anon/pen/KEaqaQ

htmlcss

Answer №1

If you want one div to completely overlay another, simply add a position:relative;. Just adding margin won't achieve the desired effect. Check out this example:

div {
    box-sizing: border-box;
    color: white;
    font-size: 28px;
    height: 100px;
    width: 200px;
}

#a { background: blue; padding-top: 40px; }
#b { background: green; position:relative; margin-top: -100px; }
<div id="a">a</div>
<div id="b">b</div>

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

Best practices for working with HTML elements using JavaScript

What is the best approach for manipulating HTML controls? One way is to create HTML elements dynamically: var select = document.getElementById("MyList"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = ...

javascripthtml

Display each column within a single row on an HTML page without extending into the next row

My HTML page layout is structured as follows: https://i.sstatic.net/elwVs.png The issue at hand is that I want the MSAN and Users columns to be in the same row, or else, for a large number of records, it won't be feasible. Here's my HTML file. ...

htmlcssangulartypescriptspring-boot

Getting the text value from a table in JavaScript is a straightforward process. By using

I am working with a table displaying available hotel rooms and want to change the text color to green if the room is marked as "available." Is there a way to check the innerHTML of a td element to see if it contains the word "available"? var status = do ...

javascripthtmlcss

Animate an image element to smoothly slide in from the left while simultaneously fading into view using Javascript

I'm looking to achieve a specific effect using pure JavaScript, HTML, and CSS without the need for jQuery or other libraries. I want an element to fade in and smoothly move to the center of the page from the left after a button click event. My attemp ...

javascripthtmlcss

Tips for keeping several buttons in the spotlight: HTML/CSS/JS

Looking for a solution to keep multiple buttons toggled on? I'm not very familiar with JavaScript, but I know that adding a class on click won't work if there's already a class set. Maybe giving the element an ID could be a possible solution ...

javascripthtmlcssbutton

Eliminating and restoring the background in a form field when it is in focus

/* This function clears the default text in a field when clicked on */ $('#edit-field-activity-notes-und-0-value') .each(function() { $(this).data('default', this.value); var mybackground = $(this).css('backgroun ...

jquerycssforms

Is it possible to trigger a submit button to perform a POST request and an AJAX call simultaneously

I have a form that sends a POST request to show_aht2.php, but I also need it to trigger an AJAX call as shown in the code below. How can I achieve this without redirecting the user to another page? I want the user to remain on map.php. Thank you in advanc ...

javascriptphpjqueryhtmlajax

Please enter the time in minutes and seconds only

Currently, I am attempting to determine a way to create an <input type="time"> field that exclusively shows minutes and seconds. Despite my efforts with time pickers, I have been unable to achieve the desired result. Does anyone have any suggestions ...

htmlbootstrap-4

When the label is clicked, the radio button does not have a selected value

I am experiencing some strange behavior with a radio button, as shown in the attached GIF. Whenever I click on the label, the selected value disappears and the radio buttons become unchecked. I have been unable to identify the cause of this issue. I am ...

jqueryhtmlbootstrap-4

Android: Substituting < p > and < br / > elements

My current situation involves receiving JSON data from a website and displaying it in a TextView. I have successfully achieved this, however, my boss requires the text to be plain with no paragraphs or empty lines. The text is retrieved from the website&a ...

androidhtml

Triangle Top Megamenu Design

Currently, I am implementing a navbar in bootstrap v4.4.1 that includes a mega menu dropdown feature. In my design, I want to include a triangle at the top of the dropdown menu. While I have managed to add the triangle successfully, I am facing difficulti ...

cssbootstrap-4drop-down-menumegamenu

Fixing border prioritization in a table using the CSS style "border-collapse: collapse"

I have encountered a problem where certain borders take precedence over others when using the border-collapse: collapse styling in a table. Specifically, when setting the border-right on a cell, it appears above the border-left. Is there a way to adjust th ...

javascripthtmlcsshtml-table

What could be the reason behind the malfunction of the sideNav function in bootstrap?

I am trying to implement a Bootstrap navbar, but it's not displaying correctly. I keep getting an error in my console that says: https://i.sstatic.net/UwbAS.png I've rearranged the order of my scripts in the head section, but I still can't ...

javascripttwitter-bootstrapcsstwitter-bootstrap-3twitter-bootstrap-4

What is the best way to center text within a div that is wider than 100%?

On my webpage, I have a header set to 100% width and text positioned on the banner. However, when zooming in or out, the text's position changes. How can I ensure that the text stays in place regardless of zoom level? Example: jsfiddle.net/5ASJv/ HT ...

csshtml

Adjusting the transparency of my banner background image using Bootstrap 4

How can I make the background image transparent without affecting other elements like the navigation menu and main text? After researching online, I discovered that overlaying with a white image of the same size could be the solution. However, when attem ...

htmlcssbootstrap-4

"Styling with CSS and HTML: The Art of Rotating

<!DOCTYPE html> <html> <head> <style> .screencontainer{ margin: 0 auto; display: block; xxheight: auto; xxmax-width: 90%; align-items: middle; } .foundations-wrapper{ display: inline-block; background-color: yellow; padding: 10px; ...

css

adjustable text size in web view interface

When loading the following html string in a uiwebview, I am trying to set the font-size as a variable value: NSString * htmlString = [NSString stringWithFormat:@"\ <html>\ <s ...

htmlcssuiwebviewxcode4.3

What is the best way to toggle the active class on a ul list?

After clicking, the active class remains on the original "li" instead of changing as it should. I've tried modifying the code but haven't been able to find a solution. Can someone please review what I might have missed? It seems like there's ...

javascriptjqueryhtmlcss

What could be causing the DIV to be out of place when the window is resized?

When the window is minimized, all elements remain intact except for the navigation. https://i.sstatic.net/xewNu.jpg The image below shows the layout when the window is maximized, while the image above depicts the layout when the window is minimized. HTM ...

htmlcssmargin

How can I make $.when trigger when a JSON request fails?

I am currently using the code below to retrieve JSON data from multiple URLs. However, I have noticed that if one of the URLs fails or returns a 404 response, the function does not execute as expected. According to the jQuery documentation, the "then" fu ...

javascriptjqueryhtmljson