precise placement of image inside pop-up

Having trouble positioning an image (an arrow) within a pop-up window. Attempted relative positioning to move the image precisely, but facing difficulties.

Decided to go with absolute positioning instead, nesting a div within another div as shown below:

<div style="position:relative;top:0px;bottom:500px;left:100px">
<img src="my_image.png" style="position:absolute" height="50" width="100" alt="Arrow pointing to the top right corner of the page" />
</div>

However, the image now only expands the pop-up without actually moving due to it not being relative to the rest of the box.

Any suggestions on how to achieve the desired effect? Am I on the right path here?

Cheers!

Edit: The purpose of this arrow is to indicate the header in the pop-up text ("In the header..."). Open to alternative ideas as well if anyone has a better suggestion :-)

htmlcssimagecss-position

Answer №1

For a successful combination, consider the following:

  • The parent element (container div, such as a popup) must have position:relative or absolute.
  • The child element (arrow) should have: position:absolute,top:123px,left:245px (indicating its position relative to the container).

The width and height of the img may not be necessary unless resizing is required. Consider removing them. If the div in your code serves only as a wrapper for the arrow, it can be eliminated by setting display:block directly on the img element.

Answer №2

It would be more effective if you set it as the background image for the entire div element.

<div style="background-image: url('my_image.png'); background-position:top right; background-repeat:no-repeat;">

</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 FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...

javascripthtmlfile

Pressing the shortcut key will activate the function specified in ng-click,

I have been searching for a solution to my problem, but I haven't found anything that really helps. What I am looking for is a shortcut within an ng-click directive where there is only an if condition without an else expression. Essentially, I just wa ...

javascripthtmlangularjsif-statementangularjs-ng-click

Why does MySQL only retrieve the most recent result?

I am currently working with a simple script, but I seem to have encountered an issue. The script is only pulling the last result from the table named "site" when it should be replacing bad words, banned words, and emojis. Below is the system that I have cr ...

phphtmlmysqlchatmessage

Is there a way to prevent the body content of this modal from overflowing outside of the modal box? I want to ensure that the text remains contained within the modal

Recently in my Angular 7 application, we integrated Bootstrap 4 for styling. However, we encountered an issue where the text inside a modal spills out of the box. How can we modify the CSS to ensure that the content remains responsive and contained within ...

cssbootstrap-4modal-dialogangular7

Tips for retaining white spaces and line breaks when adding text with jQuery append

When submitting a textarea using ajax and appending the response to a class, it only shows the content when there is no new line in the text area. Here is the HTML: <p id="updateres_n"></p> <div class="update_res"></div> Be ...

phpjqueryhtmlajaxappend

CSS magic: reveal on hover!

New to coding and encountering a challenge with my hand-coded website. My goal was for a div to change into an arrow when hovered over since the div acts as an anchor link. However, during the build process, only the paragraph inside the div responds to m ...

htmlcsshover

Tips for refreshing an element after modifying a data-* attribute

I have an element that has the following CSS style: #element:after { content: attr(data-percent); } In an attempt to change the data-percent attribute using jQuery, I used this code: $('#element').data('percent', '50%'); ...

javascriptjquerycssreflow

How can I retrieve the index of an element within a 2D array using JavaScript when the array is displayed on a webpage?

https://i.stack.imgur.com/GHx9p.png I am currently working on developing an Othello game board within an HTML page using Angular. The board itself is constructed from a 2D number array which I then display using the <table> tag on the webpage. Below ...

htmlarraysangular

the css stylesheet fails to load properly within the Django application

While using static files in my Django app, I encountered a peculiar issue: specifying body{ } in the CSS file can alter the body's attributes, but using the div's id or class name does not affect the div's attributes. Here's an example: ...

pythonhtmlcssdjango

The stylesheet displays correctly in Grover debug mode, but does not appear in the downloaded PDF file

Having some trouble applying CSS to Grover, a tool I'm using to render and download PDF copies of documents generated in my app. While the CSS renders as expected in Grover's debug mode (rendered in Chromium), it seems that my application.css is ...

cssruby-on-railsruby-on-rails-5asset-pipeline

The subdirectory containing the Rails assets is causing loading issues in the production environment

My event CSS is currently located in app/assets/stylesheets/pages/events.scss. Surprisingly, everything looks perfect in development mode with all the assets loading properly. However, the real issue arises when I switch to production as it seems like thes ...

cssruby-on-railsproduction-environment

Canvas displaying inaccurately (unsteady)

While working on a simple HTML5/javascript game, I encountered an unusual issue with the canvas drawings - they seem to be unstable. I have a map that needs to be drawn in a specific way: The background consists of 2 layers: the ocean and the islands. Th ...

javascripthtmlcanvas

Having the title inside the <head> tag will display it on the page

I recently created a simple website, but I noticed that the title is appearing on the page instead of in the head section where I originally placed it. When I checked using the inspect tool in Chrome, I found that the title tag was actually inside the body ...

htmlheaddocument-bodypage-title

Troubleshooting issue with image dimensions in Angular within CKEditor content

One issue I am facing is with CKEditor, where images inserted into Rich Text Fields have their height and width attributes set in a CSS style tag. For example: <img alt="" src="https://something.cloudfront.net/something.jpg" style="height:402px; ...

htmlcssangularckeditor

Multiple Ajax calls interacting with each other are causing issues

Within my Index.php file, there is an ajax call that loads a php page containing an HTML form. I am attempting to trigger another ajax call from Index.php whenever a select box is changed. Everything functions properly except for the ajax on change event ...

phpjqueryhtmlajax

Divided screen showcasing one movable panel

I am currently working on a design where I have a container with a specified maximum height. Inside this container, there are two separate divs. One of these divs (the footer) has a fixed height of 55px, while the other is a scrollable div that adjusts its ...

htmlcss

Ensuring Date Data Integrity with HTML5 Validations

I need to set up validation for a mobile website that includes two input fields. The first field should validate that the value is not later than today's date, while the second field should validate that it is not later than one year in advance of the ...

javascriptregexhtml

Change the button icon to something new when you hover over it

Below is the liquid code I am working with: <a href="{{ section.settings.button_link }}" class="btn--rounded"> {% include 'icon-btn--rounded' %} <div class="link-label">{{ section.settings.button_ ...

cssshopifyliquid

Ways to automatically insert an icon within a textarea

While attempting to insert an image inside a textarea, I discovered that it seems impossible without using the contenteditable ="true" attribute of a textarea. However, upon visiting the diaspora site, I found out that this can indeed be achieved. I am uns ...

cssimagehtmltextarea

Border becomes dashed when dragging and dropping

I am working on enabling drag and drop functionality for users. When an item is lifted from its original position, a gray dashed box should appear in its place. As the item is moved closer to another spot, the containers adjust to create a target area (gra ...

javascriptjqueryhtmlcssjquery-ui