Dealing with Issues of HTML and CSS Positioning

Why are my buttons not maintaining their positions correctly when the window is resized? I thought it should work as intended.

In my previous inquiry, I was able to successfully position elements for window resizing (CSS Top Relative To Screen). However, using two divs seems to be causing issues.

html, body {
    margin: 0;
}

.Div1 {
    background-image: url("https://imgur.com/7NQ3IOt.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: relative;
    height: 76.1vw;
}

.Div2 {
    background-image: url("https://imgur.com/CjVMSqG.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: relative;
    height: 169vw;
}

.Btns {
    position: absolute;
    font-size: 2.1vw;
    left: 16.5vw;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="Div1">
        <button class="Btns" style="margin-top: 4.8%">Button 1</button>
    </div>
    <div class="Div2">
        <button class="Btns" style="margin-top: 4%">Button 2</button>
    </div>
</body>
</html>

htmlcss

Answer №1

UPDATE:

Hey there, please let me know if this solution fits your needs: 

html, body {
    margin: 0;
}

.Div1 {
    background-image: url("http://imgur.com/7NQ3IOt.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: relative;
    height: 76.1vw;    
}

.Div2 {
    background-image: url("http://imgur.com/CjVMSqG.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: relative;
    height: 169vw;
}

.Btns {
    position: absolute;
    font-size: 2.1vw;   
    left: 17.8%;  
    width: 27%; 
}

.Div1 .Btns{
    height: 4.4%;
    top: 6%;
}

.Div2 .Btns{
    height: 1.9%;
    top: 2.3%;
}
<head>
</head>
<body>
    <div class="Div1">
        <button class="Btns">Button 1</button>
    </div>
    <div class="Div2">
        <button class="Btns">Button 2</button>
    </div>  
</body>

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

Tips for inserting the <a> HTML tag into a JSON array object

I am relatively new to creating array objects and I am unsure on how to add a link within a <a> tag in a JSON file. Here is the JSON object code: powerUpList: [ { id: 8, name: 'Automate your API column type ', description: & ...

javascripthtmljquerynode.jsejs

Bootstrap4 is failing to adapt to mobile devices, and this is not due to a viewport problem

When I view my webpage on a mobile device, it appears in a zoomed-out desktop view instead of the responsive design I see on my computer. I want it to look the same on all devices. The header of my webpage includes this code: <meta name="viewport& ...

htmlcssmobilebootstrap-4

Maintain the selected bootstrap tab even after the page is refreshed, even when the content is loaded dynamically

I am currently facing an issue with loading tabs using Angular. Whenever a tab is clicked, the id is saved to localStorage. Now, I want to programmatically click on the same tab using jQuery when the page refreshes. However, since the DOM element for the ...

javascriptjqueryhtmlangularjstwitter-bootstrap

What's the best way to position a child fixed DIV in relation to a parent fixed div?

Here is the HTML snippet I am working with: <div class="parent"> <div class="child"></div> </div> The corresponding CSS styles are as follows: .parent { position: fixed; } .child { position: fixed; left: ...

htmlcssbootstrap-4

Using HTML strings in JavaScript code

I am currently working on a basic modal feature where I pass a string to be displayed as the content of the modal window. Here is a snippet of the script I am using: $("[id^='mod_']").click( function() { var line1 = $(this).attr("d ...

javascriptjqueryhtmlajax

Having trouble applying CSS to SVG icons from defs file in Webkit Browser

I've been tinkering with a project that incorporates SVG icons, hoping to style them using CSS for various scenarios and hover effects. However, my attempts are falling short in Webkit, while Firefox is displaying the icons as intended: http://codepe ...

htmlcsssvg

Transform the text upon hovering over the image, with the text positioned separate from the image

I'm looking for a solution where hovering over images in a grid area will change the text on the left side of the screen to display a predefined description of that image. I've been working on this problem for hours and would appreciate any help. ...

htmlcss

What is the best way to ensure a textarea remains expanded when the parent element is in focus?

I have successfully implemented a textarea box that expands upon click and retracts when it loses focus. However, I am facing an issue where if the textbox is already in expanded form, I want it to stay expanded if the user clicks anywhere within the cont ...

javascripthtmlcss

Communicating between iframes and parent elements via events

I'm trying to trigger an event in my iframe using the following code: $('body').trigger('my_event'); However, I want to bind this event on my main page that contains the iframe like this: $('iframe').find('body&ap ...

javascriptjqueryhtmliframe

Setting a maximum value for an input type date can be achieved by using the attribute max="variable value"

Having trouble setting the current date as the "max" attribute value of an input field, even though I can retrieve the value in the console. Can anyone provide guidance on how to populate the input field with the current date (i.e max="2018-08-21")? var ...

htmlangulartypescript

When switching from JavaScript to jQuery, the button values become invisible

Currently, I have a functional app that can dynamically change the values of buttons based on user input. The current implementation is in vanilla JavaScript within the script.js file. However, I am looking to enhance the functionality and user experience ...

javascriptjqueryhtmlcssajax

Enhance your reality with Intel XDK's augmented reality feature

I am looking to develop an app using HTML and Intel XDK. It's a simple process - just place the final html pages in the www folder of the project and your app is good to go. Now, I want to integrate this: https://github.com/krisrak/html5-augmented-rea ...

htmlintel-xdk

Excessive vertical space is utilized by the vertical images in the CSS grid image gallery

My responsive CSS grid gallery is experiencing issues with vertical images disrupting the layout, as they appear at full size instead of remaining square like the others. How can I fix this problem? Thank you! Below is the code snippet: <div id=" ...

cssimagegrid

Tips for improving the user experience of :hover on mobile devices

Currently, I am utilizing SCSS to create a dropdown menu. Below is a snippet of the functionality: li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: ...

cssuser-interfacemobilesassuser-experience

Comparison between Bootstrap 4 and Firefox Preload Error

Hello fellow front end developers who are experiencing an issue with CSS preload in Firefox versions above 74.0. I have encountered a problem with the following code snippet: <link rel='preload' as='style' onload="this.onload=null; ...

cssfirefoxbootstrap-4preload

What is the best way to denote multiple line breaks in HTML code?

When creating blank lines on my webpage, I typically use the code <br />. However, inserting 20 - 40 of these can be quite cumbersome as each br tag is placed on a separate line after formatting. Is there a more elegant way to achieve the same effe ...

asp.nethtml

I am trying to figure out how to effectively utilize the $("body").scrollTop() function in jQuery

In relation to my previous question , I am looking to create an effect where as the user scrolls down the page, the opacity of the subsequent divs will increase to cover the main video. A working example can be found here: https://jsfiddle.net/Leytgm3L/38/ ...

javascriptjqueryhtmlcsstwitter-bootstrap

Retrieve all elements contained within the body tag using XPath

In my search query, I have been using the following code: //*[self::div or self::p or self::span]/text()[normalize-space()][string-length() > 140] However, this code is fetching content from non-required elements, such as <head>, which is not wh ...

phphtmlxpath

Achieving multiple pages and varying sizes (portrait, landscape) using Dompdf

Within one single HTML file, I have a total of six pages that I would like to convert into a PDF using dompdf. The pages are formatted as follows: Page size in landscape orientation, Page size in landscape orientation, Page size in landscape orientation, ...

phphtmldompdflaravel-dompdf

looping through the iteration

Here is a link to my original plunker demonstration: http://plnkr.co/edit/9UBZ9E4uxAo1TXXghm1T?p=preview. In the case of div 4 (ng-if="show==4"), I am looking for a way to hide the particular div when the list is empty. Currently, each div is displayed fo ...

javascripthtmlangularjs