Avoiding unnecessary white space when positioning HTML elements

I am working with two images, imgA and imgB. ImgA is 2000px high while imgB is 1000px high.

After placing them one after the other, I use relative positioning to move imgB up in order to overlap imgA.

Expectedly, the browser window should be 2000px high, but it seems that the browser allocates space for both images initially, making the total height 3000px. This results in a blank space of 1000px at the bottom of the page after imgB is moved up to overlap imgA.

How can I prevent this blank space from occurring?

Thank you

htmlcss

Answer №1

Disregard this

The reason for this issue is due to the images being block level elements. To prevent the browser from allocating space, simply add: display:inline-block to the second image. By doing so, the image will no longer be part of the block structure and the browser will not allocate whitespace for it.

Another helpful resource is Relatively Absolute positioning, which can be useful for your project.

UPDATE

As mentioned in the comments, the previous solution does not work. It is recommended to use Relatively Absolute positioning instead.

For a demonstration of how to position an image over another, see this jsFiddle example.

Answer №2

To overlay imgB over imgA, apply display: block to your images and then use position: absolute instead of position: relative.

Remember to set the parent element to a value other than position: static in order to ensure that the image is positioned relative to its parent element.

Answer №3

If you need more explanation, examples of "css block" can be found here:

Answer №4

Absolute positioning is a targeted approach for certain situations, but it may not be the most effective solution in every similar scenario (for instance, when dealing with overlapped elements within the main container div).

Personally, I find that utilizing

margin-top: -800px;

for the second image offers a more optimal resolution.

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

Overriding makeStyles CSS in Material UI Styling

When creating classes using makeStyles and useClasses, I've noticed that MUI CSS tends to take precedence over my custom styles unless I use the '!important' rule. Is there a way to override MUI styles without having to rely on '!import ...

cssreactjsmaterial-ui

Could there possibly exist a counterpart to .cloneNode?

I'm currently working on a recipe website submission form, and I've successfully implemented code that allows me to add more ingredients dynamically. addIngredientsBtn.addEventListener('click', function(){ let newIngredients = ingre ...

javascripthtmlnode.jsejs

What is the best way to ensure that the content fits within a div with a given max-width set by the parent div?

image description goes here I have a container set to a maximum width of 80%, but when the text inside extends beyond that, the container remains stuck at 80% instead of adjusting its size accordingly. Can anyone provide a solution for this issue? ...

cssstorybook

I've exhausted all options from stackoverflow with no success. Google Chrome's Autofill feature is wreaking havoc on my theme. Any suggestions on how to tackle this issue?

I designed a template with a stunning CSS layout. All I want is to have a transparent background with white font color, but Google Chrome seems to be causing issues with my theme. What steps should I take? I've exhausted all resources available onlin ...

htmlcssgoogle-chrome

Endless rotation with stunning magnification feature

My goal is to create a responsive carousel with auto-play infinite loop functionality, where the center item always occupies 70% of the viewport width. Currently, I have achieved a similar result using the Slick library: https://codepen.io/anon/pen/pBvQB ...

javascriptjqueryhtmlcss

Leveraging class names to dynamically apply CSS styles to components based on their props value

In the process of developing a collection of reusable components, I have utilized material-ui and styled them with CSS. One specific requirement is to dynamically set the width of a component through a prop passed into a custom button. My goal is to lever ...

javascriptcssreactjsmaterial-uiclass-names

How can I restrict the number of items displayed in each row within a navigation submenu flexbox?

My primary navigation menu has numerous child items, and I want to ensure they remain visually appealing and organized. To achieve this, I am aiming to limit each row of submenu items to only 4. After researching other solutions online, I attempted adding ...

htmlcss

When implementing Critical CSS, the Jquery function fails to execute upon loading

Currently, I am working on optimizing my website at . In an attempt to improve its performance, I decided to implement critical CSS using penthouse. The Critical CSS code can be found here, generously provided by the main developer of penthouse. However, ...

javascriptjquerycssoptimizationresize

Prevent Click Event on Angular Mat-Button

One of the challenges I'm facing involves a column with buttons within a mat-table. These buttons need to be enabled or disabled based on a value, which is working as intended. However, a new issue arises when a user clicks on a disabled button, resul ...

javascripthtmlangulartypescriptangular-material

Is it permissible to assign the same element as a child to multiple parent elements in jQuery?

Imagine you have the following HTML structure: <div id="first"></div> <div id="second"></div> Now, if you use JavaScript and JQuery to perform the following actions: var $child = $("<span id='child'>Hello</span ...

javascriptjqueryhtml

JavaScript appending checkboxes to a list not functioning as expected

I have not been using jQuery, JavaScript, and HTML to create a list of products. The task I am working on now is the ability to select multiple items from this list. Currently, the HTML list is dynamically populated with <li> elements using JavaScri ...

javascripthtmljquery-mobilecheckboxdhtml

Utilizing AngularJS for Your Business Website

We are in the process of developing a new commercial website to replace our current one. Concerns about performance are on our minds. The amount of data we have per page is not very heavy, with a maximum of 150 data binds. We plan to use AngularJS 1.2 t ...

javascripthtmlangularjs

The notification panel pop-up box keeps moving away from the right side

I'm currently in the process of creating a straightforward vertical notification panel, similar to the one seen on Stack Overflow. However, I've encountered an issue where the pop-up is not staying positioned correctly to the right side. It behav ...

javascripthtmljquerycss

The preventDefault() function is not functioning properly on the <a> tag

As a JavaScript beginner, I decided to create an accordion menu using JavaScript. Although I was successful in implementing it, I encountered a bug in my program. In this scenario, uppercase letters represent first-level menus while lowercase letters repr ...

javascriptjqueryhtmlcss

Variables are losing their way in the vast expanse of self-submitting

I have a form that needs to be submitted on the same page (index.php) and I want to capture the entered information as a JavaScript variable. <?php $loginid = $_POST[username] . $_POST[password]; ?> Here is some basic code: <script> var pass ...

javascriptphphtmlforms

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Is there a way to incorporate images with tagged marks similar to Facebook's image tagging feature? How can I retrieve the X and Y coordinates of tags on the image itself (not the screen) and display them in a responsive manner? ...

javascriptjqueryhtmlcss

Exploring Font Choices: Customizing Your Text Style

I've been attempting to incorporate my own font into my website, but despite researching several Stack Overflow articles, I'm facing various browser-specific and path-related issues. Sadly, I haven't been able to successfully display my font ...

htmlcssfonts

Determine line-height and adjust positions using JavaScript in the Chrome browser

I am creating a basic text reading application with a line to aid in easy reading. The functionality involves using the up and down arrow keys on the keyboard to adjust the position of a red line based on the line-height property. This is accomplished thr ...

javascriptjqueryhtmlcssgoogle-chrome

What is causing React Js to fail loading css when switching from anchor tag to link tag?

I am learning React and experimenting with creating a basic static website using HTML templates in version ^18.2.0 of React JS. Everything seems to be functioning correctly, however, I have encountered an issue with page refresh. Specifically, when I repla ...

javascripthtmlcssreactjs

Use the $.get() method in JavaScript to send a parameter to my controller function

My objective is to showcase the event details in a modal. To achieve this, I am running a JavaScript script that calls the "GetEventsDetails" method in my "Event" controller with the event ID. While debugging in Chrome, I can see the ID being passed corre ...

javascriptjqueryhtmlajaxasp.net-mvc