Tips for positioning a button in relation to its parent element

I'm running into an issue with absolute positioning on my website:

I'm trying to place a button relative to its parent element, and here is what I've attempted:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0px;
  left: 0px;
}

.button {
  height: 55px;
  width: 180px;
  background-color: transparent;
  border-color: transparent;
  background: url(Button.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
<div class="parent" align="middle">
  <img src="http://via.placeholder.com/1900" width="1900px" />
  <div class="child">
    <button class="button">Button</button>
  </div>
</div>

This code is causing the button to be positioned relative to the window instead of the image it should be aligning with. Therefore, when zooming in or out, the button moves within the image rather than maintaining the same relative position.

htmlcss

Answer №1

It seems like this is the desired outcome

Click here for the solution to address your issue.

Here is the updated css:

   .container {
        position: relative;
   }
   .element{
        position: absolute;
        top: 0px;
        left:0px;
   }
   .btn {
       height: 55px;
       width: 180px;

       background-size: 100% auto;
       background-repeat: no-repeat;
   }

Answer №2

It appears that the alignment didn't quite go as planned. To achieve the desired centering of the image, I made some adjustments. I eliminated the positioning from the parent element and changed the image's position to relative. Subsequently, I positioned the button relative to the image. Here's the revised code:

HTML

<div class="parent">
    <img src="background.png" width="400px" />
    <div class="child">
        <button class="button"></button>
    </div>
</div>

CSS

.parent {
    text-align: center;
}
.child {
    position: relative;
}
.button {
    height: 55px;
    width: 180px;
    background-color: transparent;
    border-color: transparent;
    background: url(Button.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: absolute;
}

JSFiddle

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

Effortless navigation through the document in both directions with seamless scrolling

To achieve a specific scrolling behavior on my webpage, I implemented the following function. Here is the code snippet: $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $("html, body").animate({scrollTop: 700}, 500); re ...

javascriptjqueryhtmlcss

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

htmlcss

Appending an empty <li> tag has no effect

I'm facing an issue with this loop where it always generates empty <li></li> tags. Can anyone help me understand why this is happening and suggest a solution? For reference, the loop runs 2 times (verified). function a(){ for (var i ...

javascriptjqueryhtml

Learn how to increase a value with each dynamically clicked button in JavaScript

Whenever I try to increment the value by clicking the like button, it seems to be increasing but not in sync with the actual button count. How can I fix this issue? index.html <div class="row"> <div class="col-md-4"> ...

javascripthtml

Tips on pausing a moving image from left to right and restarting it later

Is there a way to pause the left to right moving image at the end and then restart the loop? I tried utilizing this website link for assistance: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay Unfortunately, I couldn't fi ...

javascriptjqueryhtmlcss

angular index.html code displayed

I successfully deployed an Angular app on a server in the past without any issues. The Angular version is 6.1.1, Angular CLI version is 6.2.9, npm version is 6.13.4, and node version is 10.18.0 for both local and server environments. The server is running ...

htmlnode.jsangulargitnpm

The text manipulates the canvas position and changes the location of mouse hover interaction

I am trying to achieve a similar header layout like the one shown on this page. However, when I insert some text within the header section: <div id="large-header" class="large-header"> <h1 style="font-size:150%;">Dummy Text</h1> ...

javascripthtmlcss

How to turn off and on all elements within a Div tag

Is there a way to disable all elements within a Div tag? I've managed to disable input types successfully, but I'm struggling with links. I attempted the solution provided here, but it didn't work. Here's the code snippet that worked f ...

javascriptjqueryhtmlasp.net-mvc

Problem with Jquery Sticky Navigation

I've been struggling to understand this issue and can't seem to find any help. http://fiddle.jshell.net/DQgkE/7/show/ The user experience is currently a bit glitchy, but what I would like is: 1) When scrolling down the page, I want the Sticky ...

javascriptjquerycssajaxjquery-plugins

Changing the text color of an active button in Bootstrap

Hello everyone, I've been struggling to find a solution to my issue and I could really use some help. The problem I'm facing is changing the text color of the active button in Bootstrap. Specifically, after clicking on a button, I want it to tra ...

htmlcsstwitter-bootstrap

Stop elements from expanding by setting an automatic width with no wrapping of white space

Within my HTML page, there are nested divs as follows: div#given -- display: block div#one -- display: table div#two -- display: table-row div#three -- display: block div#four ...

htmlcssimplicitstretchnowrap

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...

javascriptjquerycsstwitter-bootstrap

A guide on utilizing Xpath to reference a tag within a class

Trying to obtain the website link by using xpath and selenium with a reference to the class pv-contact-info__contact-type ci-websites. [Here is the html snippet being referenced][1] sel = Selector(text=driver.page_source) website = sel.xpath("//*[@class= ...

htmlxmlseleniumxpathweb-scraping

Understanding page navigation in PHP

Is there a way to validate the inputs on a given page, display error messages if any, and then move to the next page if the inputs are correct? How can this be achieved? <html> <head></head> <body> <?php // define variables an ...

phphtmlvalidationnavigation

Grab onto a nested section

What is the solution for targeting the h2 span element? div#content div.view-content div.view-row-item h2 span { ... doesn't seem to be doing the trick... ...

htmlcssdrupaldrupal-theming

How to center a label vertically within a button group using Bootstrap

How can I vertically align labels for 2 inline elements inside a horizontal form without using hacks like display:table? So far, this is the code I have tried: bootply ...

htmlcsstwitter-bootstrapvertical-alignment

The email generated by Laravel does not conform to HTML formatting standards

After creating an email using markdown in Laravel, I noticed that the email content received was not displaying correctly. The HTML tags were not being rendered properly. You can view my email here. Any help on this issue would be greatly appreciated. I h ...

htmllaravelemail

Align the radio button group in the center with corresponding labels

I have several radio buttons with labels that vary in length. I am trying to figure out how to center them horizontally so that the labels are centered on the page, but still appear as if they are left-aligned. Desired result: Current HTML snippet: < ...

htmlcssradio-button

Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling

Looking to revamp the style of my ASP.NET Web Forms project with the latest version of Bootstrap. Having trouble aligning an ASP.NET Button control horizontally with other controls in the form, as seen in this snapshot: https://i.sstatic.net/IVRKo.png Her ...

htmlcssbootstrap-4webforms

I am struggling to successfully upload a video in Laravel

In this section, the Ajax functionality is used to add a video URL to the database. The values for the Video title and description are successfully being saved in the database, but there seems to be an issue with retrieving the URL. <div class="m ...

javascripthtmljqueryajaxlaravel