What is the best way to align a button with the edge of an image?

How can I use CSS to position a button on the edge of an image?

https://i.stack.imgur.com/FEFDC.png

Here is my code:

<div>

   <button class="" aria-label="Eat cake">Btn</button>
   <img class="pull-left" src="style.png" style="width: 160px; border: 1px solid #DEDEDC;"/>


</div>

Thanks,

Answer №1

Just as an illustration, I am demonstrating how the red button is positioned absolutely within its relative parent.

.blue-div{
  margin: 10%;
  position: relative;
  width: 120px;
  height: 120px;
  background: blue;
}

.red-btn{
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  border: none;
  outline: none;
  border-radius: 50%;
  padding: 8px 4px;
  color: white;
}
<div class="blue-div">

<button class="red-btn">Btn</button>

</div>

Answer №2

Sure thing, happy to help!

Just a quick tip: whenever you want an element to be positioned relative to its parent, make sure the parent's position is set to relative and the child's position is set to absolute.

.container{
  position:relative;
  width: 150px;
  margin: 0 auto;
  margin-top: 100px;
}
.container .badge{
  position:absolute;
  top:-25px;
  right:-25px;
}
.container img{
  width:100%;
  height:auto;
}
.badge{
  background-color:red;
  border-radius:50%;
  height:50px;
  width:50px;
  text-align:center;
}
<div class="container">
  <span class="badge"></span>
  <img src="http://via.placeholder.com/150x260"/>
</div>

Answer №3

.round-close {
  border-radius: 50%;
  padding: 4px 6px;
  position: absolute;
  top: 0px;
  left: 155px;
  background-color: #900;
  color: white;
}
<div>
  <button class="round-close" aria-label="Eat cake">x</button>
  <img class="pull-left" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOgAAADZCAMAAAAdUYxCAAABZVBMVEX////qQzU0qFNChfT7vAVsbGxvb29qamo3gPSjv/lycnJra2tmZmbr8v4pefPV1dX09PSIiIjj4+Pd3d3FxcXs7Oy9vb2BgYHLy8u0tLR5eXmSkpL7twCjo6PpMh/w8PAmpUqPj4+tra3pLBfpNyagoKAToT/oJQv629nqPS4zqz7P3fz8wwDW4vz2+/e53MHwhX/g6f2VzKFVs2xTjvVluHiyyfq/0vtbW1tDg/x2v4fj8e...

Answer №4

I always follow this technique:

.element {
  margin: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
  font-size: 16px;
}
.label {
  font-weight: bold;
  color: blue;
}
<div class="element">
  <p class="label">Sample Text</p>
</div>

Answer №5

button {
  position: absolute;
  top: -5px;
  right: -5px;
}

.wrapper {
  position: relative;
}

button {
  position: absolute;
  top: -5px;
  right: -5px;
}
<div class="wrapper">
  <button></button>
  <img />
</div>

Answer №6

This technique is quite simple! Just use the combination of position relative and absolute. Set the parent element to position:relative. Then set the child element to position:absolute along with specifying values for top, left, right, and bottom according to your requirements. In your scenario, make sure to specify top: margin and left: margin+picture width. I have included a code snippet to help you visualize this setup. I hope this explanation makes sense.

img {
    position: relative;
    margin:50px;
}

button {
    position: absolute;
    left: 210px;
    top:50px;
}
<div>                        
   <img class="pull-left" src="https://i.stack.imgur.com/FEFDC.png" style="width: 160px; border: 1px solid #DEDEDC;"/>
    <button class="" aria-label="Eat cake">Btn</button>
</div>

For more information, visit: 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

I am attempting to activate the HTML5 color picker's popup using JQuery

Is there a way to open a color picker in a popup window when an input[type=color] is clicked, using JavaScript? HTML <div id="customColorPick"></div> <input id="customColorPickInput" type="color" /> JQuery $("#customColorPick").click( ...

Ensure that the Materialize CSS modal form remains open even after submission

Is there a way to reload a form inside a materialize modal with empty fields without closing the modal after submitting? The issue is that currently, when the submit button is clicked, the modal closes and redirects. <div class="modal" id="docM ...

Implementing a filter in React with data fetched from MongoDB

Hey there! I'm encountering an issue while using the code in Project.jsx and ProductList.jsx. Every time I run the code, it gives me this error message: Warning: Each child in a list should have a unique "key" prop. Check the render method of Product ...

Tips for effectively overriding default CSS in JavaFX 8 for TableView

I've been trying to customize the appearance of specific columns in a tableview using JavaFX. My goal is to make editable values display with a light yellow background to indicate that they can be edited. However, when I apply the following CSS to th ...

Encountering an unexpected token in Javascript when using conditionals

I am currently attempting to integrate a JavaScript condition within a listed order, containing two radio buttons that need to be checked in order to progress to the following list based on the selection. <li data-input-trigger> <label class="fs- ...

Pressing a sequence of buttons to meet a requirement using JavaScript

Currently, I have a set of four buttons that trigger an alert message when all of them are clicked. However, I am looking to modify this behavior so that the alert is displayed only when specific combinations of buttons are pressed, such as button1 and b ...

Is it possible to use the HTML script tag without specifying the type attribute as JavaScript? <script type="text/html"></script>?

While examining the source code of an HTML page, I stumbled upon the following snippet: <script id="searchItemTemplate" type="text/html"> <# var rows = Math.floor((Model.RecordsPerPage - 1) / 3 + 1); for (var i = 0; i < rows; ++i){ ...

Having issues with the addClass() method in JavaScript not functioning properly on hover

Coding Challenge <ul class="navBarExtended"> <li><a href="#">Link</a></li> </ul> Styling Solution .onHover{ text-decoration: underline; } Interactive Scripting $("ul.navBarExtended li a").hover( function() ...

Incorporating a download link with the combination of canvg and amcharts

I am attempting to include a download link on a page that utilizes AmCharts and CanVG. The visualization of the graph and image is functioning properly. Now, I am in need of a download link to offer users the ability to download the displayed graph image. ...

Unable to include below the heading for the images

As I venture into the world of HTML, I am facing a challenge with placing titles below two images. Every time I attempt to add either h or p, the text ends up on the right side instead of below the images. What could I be doing wrong? This is all part of ...

When a child element within a flex container has a relative position, the flex direction column will be overridden and

I'm having trouble with the code snippet below. For the .container, I have set display:flex; flex-direction: column; in order to position my previous and next arrows before and after the container items. However, the flex direction does not change ...

Why do CSS changes in Chrome Console only take effect locally and not when the website is live?

I recently encountered an issue where I wanted to incorporate negative margins into a specific section of my website, as seen in the Chrome Console (link to image): .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { -webkit-tr ...

Ways to shift pictures sequentially in a horizontal line?

I am currently working on a project in asp.net where I need to rearrange 'x' number of images in a row. To explain the scenario, let's say we have 5 images labeled as 1, 2, 3, 4, and 5. Initially, they are in the order of 1, 2, 3, 4, 5. Then ...

Adjust the row based on the smallest picture

I am looking to create a photo grid using Bootstrap with images pulled from the Google Places API. The issue I am facing is that currently, the row adjusts to the height of the tallest image, but I want it to be the other way around. <div class="contai ...

Achieving perfect alignment for CSS heading and floated controls in the center of the page

I seem to encounter situations where I need inline-block elements on opposite ends of the same "line" while also needing them to be vertically aligned. Take a look at this example: http://jsfiddle.net/96DJv/4/ (focus on aligning the buttons with the headi ...

The input element extends beyond the boundaries of the container

When the text is too long, the input exceeds the boundaries of its parent container. I have been exploring ways to wrap the text within the element. I attempted using CSS properties like word-break and text-wrap, but unfortunately, none of them produced t ...

PHP and issues with search functionality

I am currently working on developing a search function to retrieve and display data from a MySQL database based on user selection. However, I encountered an error that I am not sure how to resolve. Can anyone provide assistance? I am fairly new to PHP. The ...

Issues with the responsiveness of Bootstrap 4.5.0 grid system

While following a Django tutorial, I encountered an issue with Bootstrap cards and CSS styling. Using the latest version (Bootstrap 4.5.0), I noticed that my responsive grid was causing the cards to overlap as I increased the screen size. Comparing it to t ...

Reducing Image Size in JavaScript Made Easy

I need help with a project where I want the image to shrink every time it's clicked until it disappears completely. I'm struggling to achieve this, can someone assist me? Here is the HTML code I have: <html lang="en" dir="l ...

I'm puzzled by why my newly purchased website domain occasionally redirects me to the outdated webpage

My website was previously hosted with n*agahoster but we decided to switch to a government server and change the domain from example.com to example.gov.xx. The transition was smooth, as someone managed the server and I provided backup files (public_html an ...