What is the best method to position this div above the other div?

I am facing a challenge in positioning one div above another in Bootstrap. Inside a parent div, I have two child divs - one with an image and the other with text.

Despite trying various methods like adjusting margins using CSS, I cannot seem to get the desired result.

<div id="header" class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-dark">
        <div>
            <img id="andro" class="img-fluid">
        </div>
        <div id="mainP" class="bg-dark mx-auto mx-auto center-block">
          Text in here
        </div>
    </div>


#andro{
    max-width: 100%;
    float: left;
    opacity: .5;
    margin: 0;
    z-index: 5;
}

#mainP{
    z-index: 10;
    position: absolute;
    margin: auto;
    margin-right: 50vw;
}

The issue is that I want the "mainP" div to appear on top of the "andro" div, but despite tweaking margins and z-index values via CSS, I still can't achieve the desired stacking order.

Answer №1

It appears that you assigned the id to the img element instead of the div.

Just a reminder, in order for us to provide accurate assistance, please make sure to include both CSS and HTML code or provide a working sample through Codepen / Fiddle. Without seeing the specific issue, it may be difficult for us to offer effective help.

Answer №2

To achieve the desired layout, wrapping the two inner divs in a div with the class .row will allow you to utilize Bootstrap's reordering classes. More information on this can be found at this link.

  <div id="header" class="row position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-dark">
            <div class="order-2">
                <img id="andro" class="img-fluid">
            </div>
            <div id="mainP" class="order-1 bg-dark mx-auto mx-auto center-block">
              Text in here
            </div>
        </div>

Answer №3

Hopefully this information proves to be useful for you.

I suggest placing the image and text container (#mainP) within a single div element.

Please consider implementing the following CSS code:

#mainP{
    z-index: 1;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    background-color: rgba(255,255,255,0.7);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 

<div class="position-relative d-inline-block">
            <img id="andro" src="https://images.all-free-download.com/images/graphicthumb/orange_crush_514795.jpg" class="img-fluid">
             <div id="mainP" class="d-flex justify-content-center align-items-center">
          Text in here
        </div>
        </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

Locating a button using XPath on Selenium

I have been struggling to find the specific button using Selenium WebDriver: <div class="_1gw6tte"> <div aria-hidden="false"> <div class="_159vfsnv" style="background-color: transparent;"& ...

Container Based Absolute Positioning in Bootstrap

I am struggling with aligning text properly within a container. I want it to look like the image, but the text keeps ending up at the far right side of the page. https://i.sstatic.net/aSsrC.png Could you assist me in achieving this? Thank you! HTML: &l ...

The required widths of table columns are not being adhered to

I'm struggling to create an HTML email that will display correctly in Outlook. I initially used list items and the list-style-image Property, but that doesn't work in Outlook. Essentially, I have a table with 2 rows. The left row has an 11 pixel ...

how can I apply a class name to an SVG element within styled components

I've been attempting to style an SVG icon component using styled-components, but I'm encountering some issues as the styles I apply to the close icon are not taking effect. import styled from 'styled-components' import Close from ' ...

"Exploring the variations in design between wordpress.com and self-hosted wordpress

I'm currently puzzling over the source of the disparities in style between my Wordpress site hosted elsewhere and my identical theme on Wordpress.com. It's perplexing to see such contrasting appearances while I migrate my blog. After some irrele ...

HTML list with clickable elements for querying the database and displaying the results in a <div> element

Patience please; I am a newcomer to StackOverflow and this is my inaugural question. Struggling with writing an effective algorithm, I wonder if my attempts to "push" it forward are causing me to complicate what should be a straightforward concept, or if i ...

Drag the label into the designated paragraph to copy the text. Click on the specific point to transfer the text

How can I copy the text from a label to a specific point by dragging it? <label id="text_to_be_copied" > i am a student </label> Below is a paragraph where I want to paste the copied text: <p> this is the content where I want to copy t ...

HTML parsing with HTMLAgilityPack can sometimes be tricky, as the SelectNodes

I've heard great things about the HTMLAgilityPack library and decided to give it a shot, but I have been struggling to make it work for months now. No matter what I do, all my attempts seem to result in null. Following tutorials like this one () doesn ...

Instructions for transferring files directly from one website to another

Looking at the PHP code snippet provided: <?php $image_cdn = "http://ddragon.leagueoflegends.com/cdn/4.2.6/img/champion/"; $championsJson = "http://ddragon.leagueoflegends.com/cdn/4.2.6/data/en_GB/champion.json"; $ch = curl_init();` $timeout = 0; cur ...

The layout of an HTML and CSS page does not adjust according to the size of the

Having trouble scaling down my HTML and CSS code properly using only %'s and vw's. The entree div and drink div are dynamically populated, making formatting even more challenging. <!DOCTYPE HTML> <html> <link rel="stylesheet" h ...

Utilizing CSS to Properly Position HTML Elements

Check out my code on jsFiddle I'm facing some challenges in positioning HTML elements using CSS. While I grasp the fundamental concepts of block and inline elements, implementing them in real coding scenarios can be confusing. I've shared my HTM ...

Changes in the width of the left column in Bootstrap 4 are based on the content present in the right column

I seem to be struggling with implementing Bootstrap effectively. My goal is to achieve a layout similar to this, once the "Load Report" button is clicked and there is data to display: https://i.stack.imgur.com/c3nuO.png In the image, there are two column ...

What is causing my HTML script tag to not recognize my JS file in Next.js?

Just starting out with Next.js and trying to access the web cam for a project I'm working on, but encountering an issue when writing in the "script" tag. Below is the simple code for page.js: export default function Live(){ return( <html> ...

Is it possible to stream audio using a web socket?

I'm currently working on an app that streams audio from a microphone using web sockets. I'm struggling to play the web socket response in an audio control. Can someone please provide guidance on how to play audio buffer in an audio control? Your ...

What is the best way to create a button that can cycle through various divs?

Suppose I want to create a scroll button that can navigate through multiple div elements. Here is an example code snippet: <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> <div ...

Which is the superior choice: WebSocket-Node or ws? Additionally, is there a universally accepted interface for nodejs websockets available?

I am considering switching from socket.io to regular websockets in order to utilize binary data transfers and eliminate the need for base64 encoding. There are two primary websocket libraries for nodejs available on GitHub: Worlize/WebSocket-Node einaro ...

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

After capturing the startX, startY, endX, and endY mouse coordinates, I use them to draw three shapes (a line, ellipse, and rectangle) on a canvas. I then store these coordinates in an array for each shape drawn and redraw them on a cleared canvas. The cha ...

disabling empty elements in a React JS JavaScript component

Currently, I am retrieving data from an API where users can post content up to 3 times. However, if a user has not posted three times, empty boxes with padding and background color will appear. I want to remove all elements that do not have any content wit ...

Is there a way to update the Angular component tag after it has been rendered?

Imagine we have a component in Angular with the selector "grid". @Component({ selector: 'grid', template: '<div>This is a grid.</div>', styleUrls: ['./grid.component.scss'] }) Now, when we include this gri ...

Obtaining real-time stock information for the website

I am in the process of designing a dynamic homepage that will feature real-time stock charts and a screening function for various indicators. To achieve this, I will need access to live stock data from thousands of companies. It is crucial that this data i ...