My image has the CSS property position: relative and it is covering some text content.
Is there a way to bring the text in front of the image?
I have already tried adjusting the z-index but it didn't work.
Below is the code snippet:
h2 {
padding-top: 100px;
}
img {
position: relative;
top: -150px;
}<h2>1715</h2>
<div class="img-wrapper">
<img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg" >
</div>
h2 {
padding-top: 100px;
z-index:1;
position:relative;
}
img {
position: relative;
top: -200px;
z-index:0;
}<h2>1715</h2>
<div class="img-wrapper">
<img src="https://bootstrapbay.com/blog/wp-content/uploads/2014/05/unslpash-desert-road_uvsq5s.png" >
</div>If you prefer not to alter the HTML structure, this solution may work.
To make z-index effective, it cannot be in the static (default) position. Instead, try using position: relative and z-index will function properly.
Here is a possible solution for you.
h2 {
padding-top: 94px;
position: relative;
z-index: 999;
}
img {
position: absolute;
top: 0;
}
h2 {
padding-top: 94px;
position: relative;
z-index: 999;
}
img {
position: absolute;
top: 0;
}<h2>1715</h2>
<div class="img-wrapper">
<img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg" >
</div>Consider placing both elements within a container that has a position: relative style.
You can then use absolute positioning on the children and add a z-index to them as well.
Additionally, I have centered the text in the illustration.
Remember: Unless you are dealing with flex items or grid items, an element needs to be positioned for the z-index property to take effect (more information).
#container {
position: relative;
display: inline-block;
}
h2 {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
img {}<div id="container">
<h2>1715</h2>
<div class="img-wrapper">
<img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg">
</div>
</div>As a complete beginner in HTML and CSS, I have a question that may seem silly. Recently, I created this HTML code: * { margin: 0px; padding: 0; box-sizing: border-box; } p { font-size: 14px; font-family: 'Work Sans', 'sans seri ...
Struggling to make my navigation bar collapsible on my site designed for a class project. Wondering if this requires both HTML and CSS, or can it be achieved with just HTML since this is my first time working on responsive design. Below is the code I have ...
UPDATE: I was able to answer my own question. JSoup can indeed find all image tags. I've been attempting to scrape content from but encountered a problem. In the website's source code, the main images are displayed in red font, which seems to ...
Recently came across this interesting code snippet [http://jsfiddle.net/X7UwG/][1]. It displays a parallax effect when moving the mouse to the left, but unfortunately shows a white space when moving to the right. Is there a way to achieve a seamless single ...
I've been searching for a solution to this issue for some time now, and while I believed my code was correct, it doesn't appear to be functioning as expected. HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ...
Currently, I am utilizing Bootstrap 4 and are in need of developing a list-group featuring a title as well as an arrow positioned on the right side. This is what I currently have: <div class="accordion" id="accordionExample"> & ...
Imagine having this snippet of code on a webpage: elit ac <a href="http://www.ducksanddos/bh.php" id='link'>Hello world!</a> nunc Now, picture wanting to replace the <a> tag with a <canvas> element that displays the same ...
I am in the process of designing a website that includes two clickable divs, "#coloursettings" and "#powersettings". Both of these divs successfully unbind the menu ("#tab a"), but I am struggling to make them deactivate each other upon clicking one, then ...
I've come across several solutions, but none have been able to solve my issue so far. The text fields in question look like this: .form-wrapper .field-list .field .field-element{ background-color: rgba(0,0,0,0.5); color: rgba(255,255 ...
I'm having trouble getting three buttons to align vertically in the center of an image using Bootstrap 4. I've tried using position:relative on the image and position:absolute on the buttons, but it's not working as expected. <div class= ...
How can I display data from a MySQL table on an HTML page? The content in my table includes various rows that I would like to show separately on the web page. This is the structure of my table: I envision the web page layout to showcase each row individ ...
I have updated the products in my shop to include different combinations. These combinations involve a 'packaging' attribute with two options: a 100 units box and a 200 units box, each with its own unique reference number. On the product page, t ...
Trying to customize the width of the Material UI Select component can be a bit tricky. To set the desired width, you need to assign a specific class to the FormControl component. This class, such as mw-120, should define the minimum width as 120px in your ...
Currently, I am working on making my design responsive. My approach involves displaying a basket when the div style is set to "block", and hiding it when the user browses on a mobile device by setting the display to "none". The user can then click on a but ...
Have you noticed the transparency effect in certain divs using the rgba CSS property? Strangely, Chrome on my ASUS tablet and Samsung S3 mini Galaxy smartphone does not seem to support this feature. Surprisingly, Internet Explorer does! Any insights on w ...
My main focus has been on adding a panel using JQuery Accordion, which I successfully implemented. However, I am now facing the challenge of removing the same panel that I added. I have managed to create a fiddle at http://jsfiddle.net/cof7ojky/12/ where ...
I have been experimenting with javascript and jquery to determine when the window scroll reaches the top of a specific element. Although I have been trying different methods, I have yet to see any successful outcomes: fiddle: https://jsfiddle.net/jzhang17 ...
Hey there! I've got this snippet of HTML code that I'm working with: <div class="template-page-wrapper"> <div class="templemo-content-wrapper"> <div class="templatemo-content"> <div c ...
Snippet: // Generate a blank canvas let canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 100; document.body.appendChild(canvas); // Access the drawing context let ctx = canvas.getContext('2d'); // Extrac ...
Currently, I am working on implementing pagination using NgbdPaginationBasic in my app.module.ts file. import { NgbdPaginationBasic } from './pagination-basic'; My goal is to create a series of A4 size pages with a visible Header and Footer onl ...