Avoiding the collision of two absolutely positioned elements

I have a website mockup where I've placed two elements - a logo and a form on the screen. Both are positioned absolutely, but on smaller screens, they end up overlapping (or coming very close to it). Since you can't add margin-top to elements with position: absolute, how can I create some space between these two elements (to allow scrolling) when viewed on smaller screens?

You can review the codepen link I've provided for more information: https://codepen.io/riza-khan/pen/VwPrXzo?editors=1100

When the screen size is reduced, the elements almost collide (it's even more noticeable in the live version).

https://i.sstatic.net/yKmoM.png

html css

Answer №1

A better approach would be to avoid setting these values as absolute; consider using relative values instead. After aligning them, you can then apply a CSS property like padding-bottom: 10px; to the image.

Answer №2

When it comes to absolute positioning, elements are typically set 'relative' to the root tags (html, body) unless a parent element has the css property of position: relative, in which case they become 'relative' to that specific parent.

This is important because setting a min-height on the relative component (such as the body) ensures that the absolute positions remain consistent regardless of the element's height. As a result, there is no risk of elements colliding with each other.

An easy solution for this scenario!

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

Unsuccessful passing of the popstate event in jQuery bind

Currently, I am working on a small demo using the History API, but I seem to be facing some challenges: $(window).bind('popstate', function(event) { console.log('pop: ' + event.state); }); When I click on the 'P ...

jquery html html5-history

css issue with overflow auto on fixed grid menu

Hey there! Currently, I am facing a challenge involving the implementation of CSS grid. The only issue remaining is making the top menu, which has a fixed width of 520px and a fixed position, scrollable horizontally on smaller devices. Could you provide s ...

css grid-layout css-grid

What is the best way to completely stretch 2 embedded div elements?

Is there a way to stretch two <div> elements to be 50% wide? Here is a jsFiddle with the solution. HTML <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> CSS di ...

html css

Limit the scope of addClass() to immediate children and not descendants

Looking at the code below: <div class="menu"> <a href="#" class="dropdown-item">Link 1</a> <a href="#" class="dropdown-item">Link 2</a> <ul class="hamburgerMenu__menu--levelTwo"> <li><a href="#" ...

javascript html jquery

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

I'm currently working on an Angular app that utilizes UI Bootstrap. Within my app, I have a modal containing a Datepicker at the bottom. However, I've encountered an issue where the Datepicker remains confined within the modal when expanded. I at ...

javascript html css angularjs angular-ui-bootstrap

Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect. Below is the code snippet: < ...

css vue.js vuejs2 vuetify.js v-tooltip

Instructions for turning an HTML table cell into an editable text box

Essentially, I'm looking to enable users to click on the table and edit the text within it. I found inspiration from this Js Fiddle: http://jsfiddle.net/ddd3nick/ExA3j/22/ Below is the code I've compiled based on the JS fiddle reference. I tho ...

javascript jquery html html-table

Position the text alongside the Facebook emblem

I am having trouble getting the text Follow Us to align on the far right next to the Facebook Icon. I added the float:right property, but it is not working as expected. Here is the code snippet: <a href="#" target="_blank" style="font-family: Arial, ...

html css

display data within the input field if validation is unsuccessful

I need to repopulate the form when validation fails. I am using PHP POST for validation on the same page, so I used: <input type="text" name="Name" value="<?php echo $_POST['Name']; ?>"/> However, when I open a new form, it shows so ...

php html forms validation

CSS background image that will not be affected by padding-top

Is there a way to make a background image override the top padding on the first section of a website? I have set padding-top to separate the first title from the navbar, but now I want the background image to take precedence. Thank you! Using HTML: < ...

css image background padding

In my Angular application, I have two div elements that I want to toggle between. When a button located in the first div is clicked, I need

I am working on a code snippet that requires me to hide div1 and display div2 when the button in div1 is clicked using Angular HTML5. Currently, I have two separate modal pop up template files and JS controllers for each of them. Instead of having two po ...

javascript angularjs html angularjs-directive

How to Align React Material UI Grid with Varying Row Counts in Each Column

Objective My goal is to design a component that showcases details about a device, including an icon and its current status. For instance: https://i.sstatic.net/UhpnG.png Approach I've Taken I am attempting to accomplish this by structuring a MUI Gr ...

html css reactjs material-ui

Unable to fetch local file using ajax from a local HTML page

According to Same Origin Policy, the SOP should not be applied to the file:// protocol. However, I'm having trouble with my code. I am running a testing page from my local system, and both when I try to access abc.txt in the same directory as the HTML ...

javascript jquery ajax html

Assistance requested for integrating Remy Sharp's JQuery Marquee Plugin

I'm currently working on a project to display the latest tweets for a specific hashtag. I came across this example at http://exscale.se/__files/uploads/scrolling-twitter-feed.htm which shows tweets from user timelines rather than using the search api ...

jquery html json twitter

When a div slides down on page load, the div will slide up when a button is clicked

I am trying to make a div slideDown on page load. The goal is to have the div automatically slideDown after 2 seconds, which contains a responsive image and a button named "z-indexed". However, I am having trouble getting the same div to slideUp when the z ...

jquery html css slidedown slideup

The form created using jQuery is not submitting correctly because the PHP $_FILES array is empty

Creating an HTML form dynamically in jQuery and submitting the form data via Ajax to 'add_sw.php' for processing is my current challenge. However, I have encountered an issue where the PHP script cannot access the PHP $_FILES variable as it turn ...

javascript php jquery html ajax

Adjusting Chart.js line graph alignment to the left

I'm curious about why my chart is not aligned to the left and how I can fix this issue. Here is the code snippet I am working with: var data = { labels: ["ID"] , datasets: [ { label: "Sensor 1" , data: [{ ...

javascript html css chart.js

Navigating the ropes of push-pull functionality in Bootstrap 5

How can I utilize push and pull in Bootstrap version 5.0.0-beta2? In Bootstrap 3, my code looks like this: <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <d ...

javascript html twitter-bootstrap bootstrap-5

Issue with Bootstrap 5 and vertical ruler (vr) not displaying current color

Utilizing the vr feature from Bootstrap 5 to establish vertical ruler divisions in col-sm-1 between three chartjs graphs in col-sm-3. Encountering a peculiar issue where one vr appears slightly darker than the other. Struggling to determine the cause of th ...

jquery css angular bootstrap-5

When an image is clicked, add the coordinates to a div

Is it possible to append the coordinates displayed when hovering over an image in a div using jQuery? You can see what I have so far in this fiddle: Fiddle Here is the jQuery code: $('.hover').mousemove(function(e){ var hovertext = ...

javascript jquery html

CSSer Q&A