overlay the text at the top of a div

Looking to create an overlapping effect with text in a div, similar to the example shown in the image. I am currently utilizing Bootstrap, but open to using CSS as well. However, I need the text to go slightly underneath the overlapping element.

View the example image here

Here is what I have attempted:

<h3 class="text-center" style="margin: 0px 0px -10px 0px">WebDevelopment.</h3>


<div class="row justify-content-center">
    <div class="box2" >
        <h4>alo</h4>
    </div>
    <div class="box3" >
            <h4>alo</h4>
    </div>
</div>

See the result here

csstextbootstrap-4overlap

Answer №1

If you want to control the layering of elements on your webpage, consider using the "z-index" property within your h3 tag. I've provided some sample code below for you to review:

h3{
  text-align: center;
  position: relative;
  z-index: 1;
}

.box2{
  width: 50%;
  background: red;
  float: left;
}

.box3{
  width: 50%;
  background: blue;
  float: left;
}

Answer №2

If you want to adjust the position, you might consider adding position: relative:

<h3 class="text-center" style="margin: 0px 0px -10px 0px;position: relative;">WebDevelopment.</h3>

For more details on position, check out https://www.w3schools.com/cssref/pr_class_position.asp

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 Bootstrap 5 navigation bar remains fully expanded and does not collapse as intended

I'm having trouble getting the navbar to collapse on my landing page created using react and bootstrap. Here is the code for my header component: import React from 'react'; import logo from '../images/logonoBG.png'; export default ...

cssreactjsbootstrap-5

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

javascripthtmlcssreactjsnext.js

Challenges with adjusting the dimensions of varying-sized fluid squares that are floated

I've been facing a roadblock in my coding project since yesterday afternoon. I'm trying to transform a classic unordered list menu into a tiled "gallery" within a 12 column grid, with fluid square tiles. When the squares are floated, the first s ...

resizecss-floatfluid-layoutcss

Is your text appearing vertically in Internet Explorer?

I'm having an issue with my small single page website where the text in a form is displaying vertically instead of horizontally in Internet Explorer. The problematic part is related to "vehicle condition." Any suggestions on what I might be doing wron ...

jqueryhtmlcss

HTML/CSS Top Bar: Position two contents at opposite ends of the top bar

I am attempting to design a top bar with the following layout Tel:4949494949 social media icons In the center, I want to display contact information and on the right side, my social media icons. However, ...

htmlcssnavbar

How come the focus doesn't work when altering the CSS code simultaneously?

My attempt at creating a user interface involved an issue where the input field was not visible initially. After clicking the button, the input would appear on the screen, and I wanted to automatically focus on it. This is what I tried to achieve: Initial ...

cssreactjsreact-hooksdisplay

Utilizing jQuery's multiple pseudo selectors with the descendant combinator to target specific elements

My code includes the following: <div class="a"><img></div> and <div class="b"><img></div> I want to dynamically enclose img tags with a div and utilize $(":not('.a, .b) > img") for ...

jquerycss

Is there a way to make a picture fill the entire background?

Is there a way to make pictures expand across an entire page with different resolutions? I'm trying to achieve this effect but unsure how. Take a look at my current example: . ...

javascripthtmlcssimage

Challenges with aligning Fontawesome stacks

I utilized the code example from Fontawesome's website to create a pair of stacked social media buttons and enclosed it in a div element to float them to the right side of the page. <div class="social-icons"> <span class="fa-stack fa-lg"> ...

csswordpress-themingfont-awesome

Refresh the current page with jQuery Mobile when it is clicked

I have a multi page template in jQuery Mobile. How can I refresh the current page when clicking on a hyperlink or button? I am using JQM version 1.4.5 Despite trying the code suggested in how to refresh(reload) page when click button in jQuery Mobile, it ...

javascriptjqueryhtmlcssjquery-mobile

Discover if every single image contains a specific class

HTML : <div class="regform"><input id="username" type="text" name="username" placeholder="Username" required><h3 class="check"><img src=''/></h3></div> <div class="regform"><input id="password" type=" ...

javascriptjqueryhtmlcssclass

Stylish curved bottom border

Is it feasible to create this footer using just CSS? https://i.sstatic.net/b33w4.png Appreciate the help! ...

cssbackgroundborder

Encountering a NullPointerException while trying to load a resource from a directory that is not within

I'm working with JavaFX and trying to incorporate a CSS file into my scene. scene.getStyleSheets().add(Main.class.getResource("res/application.css").toExternalForm(); An NPE is being thrown. I suspect it's because the css file isn't locate ...

javacssjavafxclasspath

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

I created a blur in/out effect for my landing page, but it's not functioning as expected and I'm not sure why. It blurs out correctly, but the issue arises when I want the underlying Div to fade in. Currently, it just appears abruptly after the ...

javascripthtmlcss

My intention is to ensure that the page is printed with the Background graphics checkbox pre-checked

When using the print button, I typically include the following code: onclick="window.print();" I also came across this code snippet to set a checkbox as checked by default: <style type="text/css" media="print"> * { -webkit-print-color- ...

javascripthtmljquerycssjquery-plugins

Encountering an unforeseen issue with my code

I am currently developing a web application in advanced Java and incorporating various external libraries such as choosen.js, summernote.js, Bootstrap, BootstrapValidator, etc. I have encountered some errors and am struggling to pinpoint the root cause of ...

jqueryhtmlcsstwitter-bootstrap-3summernote

Angular and Bootstrap are like peanut butter and jelly -

Recently, I've been delving into Angular and attempting to integrate Bootstrap into my projects. To install Bootstrap using npm, I ran the following command: cmd npm install bootstrap --save After the installation, I imported the necessary styles in ...

angularbootstrap-4

Unable to conceal the scrollbar while keeping the div scrollable

I've been attempting to implement the techniques outlined in the guides on this site, but I'm encountering difficulty hiding the scroll bar while still maintaining scrolling functionality! My current approach involves setting the parent as relat ...

javascripthtmlcss

Arrange the divs vertically by utilizing flexbox styling

My goal is to use flexbox to vertically align three div blocks. Even though I can successfully align them horizontally, I am facing issues with vertical alignment. What could be the mistake in my approach? .banner { padding- ...

htmlcssflexbox

What is the best way to stack two pull-right elements on top of each other within the Bootstrap grid system?

I have set up a bootstrap grid system on my webpage and I am trying to align two elements to the right, one below the other. Currently, this is how it appears: https://i.sstatic.net/UcpAJ.png When I try to align the "Active" and "Primary" buttons undernea ...

htmlcss