Position links at the top right and top left corners of an image

I am trying to position two links over an image inside a div. The links should be placed on the top-left and top-right corners of the image. I have attempted the following code:

<div class="container">
  <div style="float:left"><a href="#">like</a></div>
  <div style="float:right"><a href="#">share</a></div>
  <img src="images/activity-image.jpg" />
</div>

However, the floating divs are pushing the image down instead of appearing over it. I want the like and share links to be displayed on the top-left and top-right corners of the image within the div. Any assistance on how to achieve this would be greatly appreciated. Thank you.

htmlcss

Answer №1

To position text, utilize the absolute property inside a parent element that is relative. Utilize properties such as top, bottom, right, and left to specify the positioning of the text.

Give this method a try:

.top{
    top: 0;
}
.left{
    left: 0;
}
.right{
    right: 0;
}
.img{
    position: relative;
    width: 200px;
    height: 200px;
    background: url("https://www.google.com/images/srpr/logo11w.png") no-repeat;
}
.img span{
    position: absolute;
    color: #000;
}
<div class="img">
    <span class="top left">text</span>
    <span class="top right">text</span>
</div>

Take a look at the JSFiddle Demo

Answer №2

.container {
    position: relative;
    width: 300px;
}
img {
    width: 300px;
    height: 300px;
}
.top_right {
    position: absolute;
    right: 0px;
    top: 8px;
}
.top_left {
    position: absolute;
    top: 8px;
    left: 8px;
}
<div class="container">
    <div class = "top_right"><a href="#">like</a></div>
    <div class= "top_left"><a href="#">share</a></div>
    <img src="http://thevisualcommunicationguy.com/wp-content/uploads/2013/11/Starbucks-Logo-051711.gif" />
</div>

PS - This pertains to the provided code snippet, although there may be alternative approaches.

JS Bin demo

Answer №3

Check out this resource for tips on adjusting the CSS positioning of the h2 element to better fit your design: css-tricks.com/text-blocks-over-image

Answer №4

Did you establish CSS positioning? One technique is to use the CSS property position: fixed for the image, which can help keep it in place while floating the divs.

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

Steps for creating an attention-grabbing text heading

Is there a way to insert an H1 header within an image header, similar to this example? Or how can I incorporate the text "Hello World" into the image header? View Image Here ...

htmlcss

Selenium Webdriver experiencing issues with running JavaScript code

Looking to extract data from an Aliexpress product page? Take a look at this example. Specifically, I am interested in this section (transaction history). Here is my code snippet: from selenium.webdriver.chrome.options import Options from selenium impor ...

javascriptpythonhtmlseleniumselenium-webdriver

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

I have a <mat-card> containing a login form on my page. However, when error messages are displayed, the vertical size of the <mat-card> changes and I need it to remain the same. Is there a way to prevent this from happening? Below, you will ...

cssangularbootstrap-4angular-materialng-bootstrap

Ways to stop a user from being deleted while logged in on a JSP page or HTML

I have a JSP code with a delete button, but I want to exclude the current login user from deletion. This is my jsp code with delete button. I dont want to delete current login user. <table border="1"> <thead style="background: # ...

javahtmlmysqljsp

When toggling the menu in bootstrap, the functionality of <a href=""> links may be disrupted

My attempt to integrate a toggle function into each link in the menu to automatically close the menu on mobile after selecting a link has hit a snag. With the solution of adding data-toggle="collapse" data-target="#navbarSupportedContent" to the <a href ...

javascripthtmlbootstrap-4

Utilizing a for loop to add div elements

I have a HTML form in my code where the user fills out information, including entering a value in the "member" field and clicking a button to generate additional copies of the 'sector_prop' div. The form section is - Number of Sectors (L ...

javascriptjqueryhtml

How can the presence of a CSS rule prevent another from being applied?

My attempt to create this HTML file in Chrome posed some challenges: <style> br { }​ [required] { border-width: 3px; border-color: red; } </style> <input required /> The entire content of the file is shown above. However, I noti ...

htmlcssgoogle-chrome

Tips for creating a line to connect corresponding div elements using JQuery

I am working on an HTML project with jQuery and I want to create a feature that allows users to select a panel from one column and have it move to another column. While I know how to make the selection functionality work, I am struggling with drawing conne ...

jqueryhtmlcss

A step-by-step guide on showcasing a Word document in a popup window using MVC 4 Razor

I'm looking to display a Word file in a pop-up window using MVC 4 Razor. The file is located at a specific path and has already been stored in my project. ...

htmlasp.net-mvc-4

Arrange two Angular 2 divs in a single row, with one positioned below the

Good Evening, I have a project in angular and I need help with styling. Specifically, I have 3 divs - card, table, and map. I want the card and table to be in the same row, and the map to be below them with double the size. The top left should have item in ...

htmlcssangular

Enhance your inline <pre> text by adding a unique background color with CSS

How can I achieve the gray background color, like in this word, which is contained within an inline <pre></pre>? This is what I have attempted so far. The code snippet shows that the inline style works fine after the </pre> but not befor ...

htmlcss

Select a specific division element using a pseudo element

My goal is to specifically target the third div in my HTML code with a class called .counter-wrap. When viewed on a mobile device, this particular div has a margin-bottom of 40px. I am looking to eliminate the margin-bottom for only the third stacked div n ...

htmlcsscss-selectorsflexbox

AngularJS Application experiencing extremely slow performance with IE's "Style Calculation" feature

In my AngularJS app, I am using Angular Material and loading data from an external API. Everything runs smoothly in Chrome, Firefox, and Safari, but when it comes to Internet Explorer, the performance is abysmal. The app becomes slow, CSS animations are c ...

cssangularjsperformanceinternet-explorer

"Enhance User Experience with Autoplay.js for Interactive Content and Sound Effects

I'm trying to get both the animation and audio to start playing automatically when the page loads. Currently, the animation pauses when clicked, but I want it to load along with the audio playback. I attempted to use var playing=true; to enable autop ...

javascripthtmlcsswordpress

Using AngularJS to bind radio buttons to ng-model

Here is a snippet of my HTML code where I attempted to bind the "formFriendsAll" scope to the ng-model. <form ng-submit="submitForm()" > <div class="col-sm-3"> <div class="form-group"> <label>Which Persons to show?< ...

javascriptangularjshtmlradio-buttonangularjs-ng-model

Is there a way to enable horizontal scrolling for a div table within an iframe element?

Looking for a solution to scroll a table horizontally to specific locations by clicking anchor tags outside of its frame? I initially used inline js which worked with the old table, but after updating to CSS, it stopped working. Seeking assistance from exp ...

javascripthtmlcssiframe

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

I've been attempting to execute the code below, but I keep encountering an error. I even tried including document.addEventListener('DOMContentLoaded', (event) => yet it still doesn't work. Interestingly, there are no errors if I run ...

javascripthtmlcssreactjs

What is the best way to extract data from a text file in order to access the values in a dynamic HTML

After successfully generating a dynamic HTML table that takes input values using HTML and JavaScript functions, I am now looking to plot a graph with the values from the table. The challenge is to insert these values into the table from an external text fi ...

javascriptphphtmljsongetjson

Tips for aligning 2 columns when both table cells contain inner tables

Concerning my HTML table, cells #3 and #4 contain inner tables. I am facing an issue with aligning the rows within each table in cell #3 and cell #4 properly. Sometimes, the length of text in a row exceeds a single line, causing misalignment with the othe ...

htmlcss

Is it possible to use getJSON to retrieve a value from an HTML tag ID that has already been displayed on a webpage? How about using json_decode

Is there a way to retrieve the value using the HTML tag ID after an HTML page has been rendered? For example, how can I access the date value using the td_date in my JavaScript function? Below is the code snippet that populates the data on the page: listS ...

phpjavascripthtmljson