Tips for Moving an h1 Tag to the Beginning of a Div

As a beginner in HTML, I have encountered an issue with my code. My div element contains an image and an h1 tag, but the h1 is currently positioned below the image. How can I center the h1 on top of the image?

<div class="headwrap">
    <div class="headimage"><img src="images/Header-image1.jpg">
    <h1 class="headtxt"> I Love Photography</h1>
    </div>
</div>

Css:

.headwrap {

    margin: 0;
    max-width: 1500px;
    width: 100%;
    height: 100%;


}

.headimage {

    max-width: 1500px;
    width: 100%;

}

.headtxt {

    margin: 0 auto;
    padding: 0;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    float: left;

}
htmlcss

Answer №1

To create a layered effect, apply position: relative to the parent element and then use position: absolute on the H1 tag:

.headwrap {
    margin: 0;
    max-width: 1500px;
    width: 100%;
    height: 100%;
    position: relative;
}

.headimage {
    max-width: 1500px;
    width: 100%;
}

.headtxt {
    position: absolute;
    top: 0;
}

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

What is the best way to navigate a carousel containing images or divs using arrow keys while maintaining focus?

Recently, I have been exploring the Ant Carousel component which can be found at https://ant.design/components/carousel/. The Carousel is enclosed within a Modal and contains multiple child div elements. Initially, the arrow keys for navigation do not work ...

javascriptjqueryhtmlreactjsantd

Modify a singular aspect of shorthand background attribute

Imagine using the shorthand background property to define multiple properties. For example: .img { background: url('/Content/images/a.png') no-repeat scroll 100% 3px; } If you need to override just the background-position of the image, sh ...

cssoverriding

Submitting a form through Ajax is resulting in multiple submissions

Whenever I use Ajax to submit this form, it ends up posting multiple times without any obvious reason. Sometimes, it posts the form up to 10 times even though the submit button is clicked only once. I'm puzzled as to why this behavior is happening. An ...

javascriptphphtmlajaxforms

Is there a way to lead to a password-protected page without making it accessible through the URL?

I'm currently honing my skills in web development and embarking on a project to create an interactive puzzle website. The premise is simple - the homepage will feature just an answer input field where users can enter the correct solution to progress t ...

javascriptphphtml

Styling specific to Nuxt.js layout with scoped css

Currently, I am using Nuxt and have a header layout for my navigation that has a white background color. However, on a specific page, I would like to change the navigation background color to be transparent (only for this page). I have attempted a few so ...

cssvue.jsnuxt.js

Creating an inverted curve or border-radius for a div element is a design technique that can add

I've been tackling a project that requires me to style the border of a div in an inverted manner. To achieve this, I'm limited to using only CSS and JS without any plugins. I've searched through various online resources and similar questions ...

javascriptjqueryhtmlcss

Social media icons failing to adhere to inline block formatting

Three social icons were designed to be displayed in a row (check out the working JSFiddle - here). Despite this, when implemented on my Wordpress blog, they are not positioned side by side but rather stacked on top of each other as seen here - . Is there ...

htmlcsswordpress

In JavaScript, I'm facing an issue where I can't seem to use ' ' for line breaks for some reason. It's not functioning as expected, and I'm

It seems that I have been struggling with writing a new line in my code using "\n". Despite multiple attempts, the desired outcome has not been achieved. Below is my source code along with a screenshot of the result: var ary3 = new Array('seve ...

javascripthtml

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Due to different screen sizes, the image does not appear on top of another image exactly. It seems like a new function is needed. One that does not overlap with another image (by clicking the function for a few seconds), but rather replaces it for those fe ...

javascriptcssbuttononclickclick

Choose all options within the optgroup group

I am facing an issue with a select element that contains grouped options. My requirement is to be able to select or deselect all options within an optgroup when a specific option is clicked. Furthermore, I need the functionality to allow multiple optgroups ...

javascriptjqueryhtml

Is there an `insert_id` that can be used as an

I'm facing a simple issue here. I have a user creation page on my system where I display the newly created user's ID after creation. printf("New user has been added. The user ID is %d \n", $mysqli->insert_id ); My question is, how can I ...

phphtmlmysql

What is the best way to implement a switch that can simultaneously display both the on and off positions?

I need help customizing a toggle switch element in CSS. I want the first row to display as on (blue color) and the second and third rows to be displayed as off or grey. So far, my attempts to modify the CSS code have been unsuccessful. .switch { posi ...

javascriptjqueryhtmlcss

Exploring the images in a continuous loop

Looking to create a unique image looping effect using HTML, CSS, and Jquery/Javascript. The concept is to display several images on one page that do not move, but loop through them one at a time while displaying text above the current image. For example, ...

javascriptjqueryhtmlcss

Choose a sibling element using CSS styling

As I'm developing an AngularJS component, I am on the quest to identify ANY sibling of a particular tag, irrespective of whether they are div, span, or p. I'm hoping for a CSS-native solution that resembles something along the lines of div:siblin ...

htmlcssangularjscss-selectors

Utilizing Google Tag Manager for Efficiently Managing Multiple Schema Product Reviews with JSON-LD and Variables

Currently, I am facing a challenge while using Google Tag Manager to incorporate Schema JSON-LD Product reviews on certain pages. Despite my efforts, I am unable to locate any relevant resources to resolve this issue. The main problem lies in informing GT ...

javascripthtmlschemagoogle-tag-managerjson-ld

Unable to showcase information in the center of an HTML document

Hello, I'm facing an issue with my HTML page that has a left vertical nav-bar. Despite my efforts, I can't seem to display content (text) in the center of the page as shown in the screenshot with the red oval. I've attempted inserting text ...

javascripthtmlcssbootstrap-5

How can I apply a blue border to highlighted elements in the live preview?

Upon clicking on the div or element within the brackets, the live preview in Chrome briefly flashes blue and then fades away. However, it does not create a thin blue border around the element like I have seen in other people's videos. Can someone plea ...

htmlcssadobe-brackets

Enhancing the SVG font size through custom CSS styling

Working with an SVG element and utilizing CSS to adjust the font-size of the text within the SVG. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"& ...

csssvg

The background property does not support linear-gradient in CSS

I am currently working on creating a tree structure using the vue-orgchart library (link) Everything is functioning correctly, but I am interested in changing the green background color of the node (ignoring the white portion). https://i.sstatic.net/EEcd ...

javascripthtmlcssvuejs2

Child element failing to resize along with parent container

Here is the HTML structure I have for a template.php page within my website. <!DOCTYPE html> <html lang="en"> <head> <title></title> ...... </head> <body> <div id="container"> ...

phphtmlcsscodeigniter