I attempted to position a floating div on top of an image, but unfortunately, it did not function as

The Dilemma I'm Facing

I am attempting to overlay a text box/a box on top of an image using a div. Despite trying, my code is not achieving the desired result.

Below is the code snippet:

HTML/CSS : 

.main{
position: relative;
margin: 8;
}
.main img{
position: relative;
height: 510px;
width: 100%;
}
.main-content{
position: absolute;
background: white;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>PokeMart</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<img src="valor.png">
<h3>PokeMart</h3>
<h4><a href="#">Login</a></h4>
<h4><a href="#">Register</a></h4>
</div>
<div class="main">
<img src="bg.jpg" />
<div class="main-content">Text</div>
</div>
<div class="footer">
<h5>Pokemart established 2017, powered by Pokemon Company</h5>
<h5>Copyright © 2017 LL. All Right Reserved.</h5>
<div class="contact">
<img src="facebook.png" width="25" height="25">
<img src="google.png" width="25" height="25">
<img src="twitter.png" width="25" height="25">
<img src="github.png" width="25" height="25">
<img src="instagram.png" width="25" height="25">
</div>
</div>
</body>
</html>`i

The CSS code provided involves the floating div, however, attempts with Display: Inline-block have been unsuccessful.

htmlcss

Answer №1

When utilizing absolute positioning, it is important to specify the placement of the content. Consider using top, left, right, bottom properties to effectively adjust the position of the content.

top:20%;
right:100px;


.main {
  position: relative;
  margin: 8;
}

.main img {
  position: relative;
  height: 510px;
  width: 100%;
}

.main-content {
  position: absolute;
  top: 20%;
  right: 100px;
  background: white;
  height: 40px;
  width: 40px;
}
<!DOCTYPE html>
<html>

<head>
  <title>PokeMart</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="header">
    <img src="valor.png">
    <h3>PokeMart</h3>
    <h4><a href="#">Login</a></h4>
    <h4><a href="#">Register</a></h4>
  </div>
  <div class="main">
    <img src="http://via.placeholder.com/9000x500" />
    <div class="main-content">Text</div>
  </div>
  <div class="footer">
    <h5>Pokemart established 2017, powered by Pokemon Company</h5>
    <h5>Copyright © 2017 LL. All Right Reserved.</h5>
    <div class="contact">
      <img src="facebook.png" width="25" height="25">
      <img src="google.png" width="25" height="25">
      <img src="twitter.png" width="25" height="25">
      <img src="github.png" width="25" height="25">
      <img src="instagram.png" width="25" height="25">
    </div>
  </div>
</body>

</html>`

Answer №2

.container {
  border: 1px solid #000;
  position: relative;
  max-width: 450px;
}
.container img {
  border: 1px solid #000;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.container .overlay {
  border: 1px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}
.container .overlay .content {
  margin: auto;
  background-color: #FFF;
  border: 1px solid #000;
  padding: 40px;
}
<div class="container">
  <img src="http://www.telegraph.co.uk/content/dam/gaming/2017/10/10/Pokemon-Halloween_trans_NvBQzQNjv4BqZPnXlBHEdt8AtjizIYNgmRSlK0RKxqt6w8JJghUtSuI.jpg?imwidth=450">
  <div class="overlay">
    <div class="content">content</div>
  </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

The innovative way Vue.js revolutionizes HTML updates within a Websocket onmessage event

I'm new to Vue.js and I'm trying to capture data inside the onmessage event of a websocket and update an HTML component (either a span or div). While console.log or alert functions work in onmessage, I couldn't get it to update the span. Th ...

javascripthtmlvue.js

After integrating Tailwind/Flowbite, I am experiencing an issue with the border in my CSS code

I am facing an issue with tailwind and flowbite integration I had successfully styled my inputs with a "border-bottom 1px solid black" rule to have a single bottom border. However, after installing tailwind and flowbite, my border styling is no longer wor ...

htmlcssreactjstailwind-cssflowbite

Tips for refreshing only a portion of a webpage using JavaScript/jQuery

I have two distinct navigational sections on my website. The left column has its own navigation menu, while the right column (main content area) contains a separate set of links: My goal is to click on a link in the left-hand sidebar (such as "Resume", "E ...

javascriptjqueryhtml

Having trouble with CSS hover sliding animation going from top to bottom not activating

I'm trying to create a social hover effect where the background color slides down from top to bottom. I've written the CSS code for it, but for some reason, it's not working as expected. ul.socials { display: flex; flex-direction: row ...

htmlcss

Data-id attribute fails to appear when applied to an element hidden with display:none property

Creating a notification popup feature using bootstrap popover. Each notification is represented by a div with the same classes, but different text content. <% Loop through notifications and create a div for each %> <div class="media n-media n ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

The text in the TextArea is not displaying line breaks as expected

Similar Question: Issue with new line preservation in .val() method for textarea I'm facing an issue where my text area does not preserve newlines when I enter a message with multiple lines. Even after retrieving the value from the text area, the ...

javascriptjquerycss

There are certain CSS3 properties that are not being accounted for in the CSS min

I've incorporated several newer CSS3 properties in my stylesheet, but I'm concerned that the minification tool I'm currently utilizing may not be capturing all of these properties: .big-blue-button:hover { text-decoration: none; bac ...

javascripthtmlcssminify

Need to split your screen into two horizontal DIVs, each with their own scrollbars? Check out this example link for a demonstration!

Hey there! I have a question about creating something similar to this cool website: I'm working with Wordpress and using a child theme for my website. I want to include a fixed header as well. Currently, I've managed to give each div its own sc ...

htmlcsswordpress

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

javascriptarrayshtmlsvg

When the React button is clicked, it displays a stylish blue border

Hey there, I'm currently working on a project using React and facing an issue with some buttons I've styled. Whenever I click on them, they show a strange blue border that I can't seem to get rid of. I've tried setting border:none !impo ...

cssreactjsbuttonsassreact-bootstrap

When openui5 converts XML, the class property is not included in the HTML output

I have included the "footerAlarms" value in the XML view, but when I check the HTML version in the browser, it is not showing up. How can I make sure that the class footerAlarms appears in the HTML view? <footer class="footerAlarms"> < ...

htmlcssxmlsapui5footer

Creating a row with 5 columns in Bootstrap 4 dynamically is a handy trick for enhancing the layout of your website

Struggling to find the right layout for displaying products on my store's home page. <div class="row"> @foreach($produts as $product) //this is the syntax of my templating engine <div class="col-md-3"> </div> @endf ...

cssbootstrap-4

Display the div only if the content matches the text of the link

Looking for a way to filter posts on my blog by category and display them on the same page without navigating away. Essentially, I want users to click on a specific tag and have all posts with that tag show up. Since the CMS lacks this functionality, I pla ...

javascripthtmljquery

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

javascriptcsshtml

Ways to dynamically conceal an HTML element when another element is devoid of content

How can I dynamically hide the heading above a div if that div is empty? The content of the div will change based on user input. I would like the heading1 to appear immediately after a button click event. I am inclined towards a CSS solution, although the ...

javascriptjqueryhtmlcss

Using Cordova to create an accordion list on an HTML webpage

I am in need of an accordion list implementation for the given HTML code. I specifically want it to expand when 'Technical' is clicked, and collapse upon clicking again. Here is the HTML code: <!-- Techincal --> <div class= ...

htmlangularjscordovaionic-framework

The JQuery.hover() function is experiencing issues with detecting hover events while moving the mouse over

While attempting to enhance the functionality of hovering over a 2048 tile, I encountered an issue. Each tile with a value of n is assigned a class 'tile-n'. Specifically for the basic 'tile-2' tile, I have written hover functionality ...

javascriptjqueryhtmlcsshover

Achieve a full-width span for a single item in a CSS grid without any alterations to the HTML code

How can I make the first item in this grid span 100% without changing the HTML structure? The first item is assigned an extra class ".sub" Is it possible to achieve this? Click here for more information <div class="fd-col fd-5col"> <div class= ...

csscss-grid

What is the best way to adjust the height and width of a div when it comes into view through scrolling?

How can I automatically and frequently change the size of my div when it is scrolled into view? HTML <div id="contact" class="fadeInBlock"> <div class="map"> <div class="pointer"> <div class="dot"></div& ...

javascriptjqueryhtmlcss

Scroll horizontally on a webpage using drag with JavaScript

I have been working on a unique horizontal website design that allows users to scroll horizontally by dragging the screen. I managed to successfully implement the horizontal scrolling feature, but I am facing difficulties in adding the horizontal drag-to-s ...

javascripthtmljquerycss