How to eliminate the gap below a CSS element by adjusting the top value

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

The three 'Replacement Options' sections are contained within a div with the class relative. The relevant CSS properties have been applied as shown below:

.relative {
    top: -10rem;
    position: relative;
}

It's worth noting that this behavior is intentional, as illustrated in the screenshot.

You'll notice that there is content positioned under the three columns. Here lies the issue at hand.

I'm investigating if it's feasible to utilize negative values to eliminate the space reserved for the three columns without affecting the layout of the content below.

One solution could involve applying a negative value to the content itself, but I'd prefer to explore alternatives to avoid potential issues with spacing underneath the content.

Here is the current structure of my HTML:

<div class="relative home-top-minus">
    <div class="row three-column-margin">
        <div class="column small-12 medium-4">
            <div class="panel-orange text-center column-padding">
                <img src="http://placehold.it/200x150" alt="" />
                <h3 class="heading-tan heading-padding-small">REPLACEMENT OPTIONS</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
                    ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
                </p>
                <a href="#"
                   class="button large">LEARN MORE</a>
            </div>
        </div>
        <div class="column small-12 medium-4">
            <div class="panel-light-orange text-center column-padding">
                <img src="http://placehold.it/200x150" alt="" />
                <h3 class="heading-brown heading-padding-small">REPLACEMENT OPTIONS</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
                    ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
                </p>
                <a href="#"
                   class="button large">LEARN MORE</a>
            </div>
        </div>
        <div class="column small-12 medium-4">
            <div class="
                  panel-brown text-center 
                  column-padding">
                <img src="http://placehold.it/200x150" 
                     alt="" />
                <h3 class="heading-light-orange
                             heading-padding-small">
                      REPLACEMENT OPTIONS</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
                    ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
                </p>
                <a href="#" class="
                       button large">LEARN MORE</a>
            </div>
        </div>
     </div>

    <div class="row">
       <div class="column small-12 medium-4">

           <div class="bubble">
               <p>
                   “Click Replacements has provided us with substantial savings ever since we signed up!!!”,
                   exceptional service and adeptness in handling
                   even demanding customers.”
               </p>
               <p class="heading-light-orange">
                    Product Retail Manager
               </p>
           </div>

        </div>
        <div class="column small-12 medium-8">
             <h2 class="h1 heading-light-orange">WHY CHOOSE CLICK REPLACEMENTS</h2>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
                 ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
             </p>
            <a href="#"
              class="button large alt">LEARN MORE</a>
        </div>
   </div>
  </div>
htmlcss

Answer №1

Instead of using top:-10rem, try switching to margin-top:-10rem and ensure your z-index is higher than the element above it (in this scenario, the element with class .top has a z-index of 2).

.top {z-index: 2} , .relative {z-index: 3}

Test it out and let me know if it works! In the provided example snippet, it should work as intended.

.relative {
    margin-top: -10rem;
    position: relative;
    z-index:999;

}
.top {
  height:200px;
  background:blue;
  position:relative;
  z-index:2;
}
.bottom {
  height:200px;
  background:blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/>
<div class="top">

</div>
<!-- More HTML code follows -->

Answer №2

Instead of using top: -10rem;, try using margin-top: -10rem; for the desired effect.

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

Does Xamarin.Forms have a feature similar to html datalist that enables the selection of predefined values while also allowing for the input of free text?

We are currently developing a Xamarin forms application. One of the necessary features is a selection field where users can either choose from predefined options or enter their own text value, similar to using a text field. In HTML, this could be easily ...

androidhtmliosxamarin.formscontrols

Customize WPBakery Accordion Background Color

I'm currently using WPBakery's Accordion section, version 5.4.7, to showcase a Gravity Form. I am attempting to modify the background color of the active accordion section to black. After exploring various forum examples, I have attempted to add ...

csswordpressaccordionbackground-colorvisual-composer

Difficulty encountered with changing font color on CSS

I'm having trouble fixing the text color, it's currently white and blending in with the background. I've set the color to #1a6eb6 for both the TEXT element and the submenu list items, but it's not working. Can someone assist me with thi ...

htmlcsscss3pie

What causes my unordered list to vanish when I use the CSS float: right property?

Can anyone explain why my ul element disappears when I apply the float: right property in CSS? I'm currently working on the navigation for a website project. You can view the code snippet on CodePen by following this link: https://codepen.io/maximo ...

htmlcss

Is your PHP random advertisement feature malfunctioning?

<div id="bannerAd"> <?php //THIS SCRIPT RANDOMLY SELECTS AN AD. $randomAd = rand(1,3); switch($randomAd) { case "1": $adLink = "/sale.php"; $imageFile = "/images/saleAd.png"; ...

phphtml

Updating the value of each preceding sibling of every checked checkbox using jQuery upon form submission

After extensive research, I discovered that the most effective approach involves using a clever workaround to capture every tick and untick on a dynamic input row with multiple checkbox arrays. However, none of the solutions provided a viable method. I th ...

javascripthtmljquerycheckbox

What's the best way to center align my tag vertically in this scenario?

I am struggling to center my text vertically in this scenario. Here is the structure I have: <section id='container'> <div id='title'> <h1>Title here.</h1> </div> </section> This ...

htmlcss

Leveraging an HTML interface in conjunction with a node.js application

My objective is to implement JavaScript on the server side. To achieve this, I have decided to use node.js as it seems like the most logical solution. While I am quite familiar with node.js from working on applications, I now need to utilize it for server- ...

javascripthtmlnode.jsdeployment

Utilizing jQuery in Wordpress to Toggle Content Visibility

Currently, my website pulls the 12 most recent posts from a specific category and displays them as links with the post thumbnail image as the link image. To see an example in action, visit What I am aiming to achieve is to enhance the functionality of my ...

javascriptjqueryhtmlcsswordpress

Use jQuery to automatically update a variable every 5 seconds

For the first time, I am using django to build a webpage and facing a challenge in fetching the value of a variable from a .py file every 5 seconds. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <title&g ...

pythonjqueryhtmldjangoajax

What is the best way to center CSS content such as boxes and text?

As a beginner in CSS tutorials, I am seeking guidance on how to center the entire content in the browser. Below is the CSS code that needs attention. Additionally, there is a screenshot of the current output included for reference. body { background:#E9 ...

phpcsshtml

The e.currentTarget attribute in Material UI buttons is a key element that

I am facing an issue with implementing three tabs and buttons in my project. Each button should display a corresponding message when selected I have tried using e.currentTarget but no success so far. Can someone guide me on how to resolve this problem? You ...

javascripthtmlreactjsreduxmaterial-ui

Enclosing floated elements within a parent div

Looking for a way to make a div wrap around a changing number of child elements without specifying a width for the parent? I've managed to get the content wrapping by floating both the child and parent elements, but I'm facing an issue when the ...

htmlcss

Creating a central navigation menu for a website

Currently, I am working on incorporating a menu in the center of a webpage (please note that this is not a top navigation menu). Here is the initial setup: Users are able to click on various menu items to access different content. I have written code fo ...

javascripthtmljquerycss

Django positions the save button

Is there a way to update the data in this column using a form, display and save the data, and also add a delete button? I'm seeking a solution for this issue. models.py class Employe(models.Model): Matricule = models.CharField(max_length=10, null=Fal ...

pythonhtmldjango

The custom font fails to load on a customized Material UI theme

In my React web application, I tried to implement a custom font by writing the following code: import React, { FunctionComponent } from 'react' import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles' import SofiaPro ...

javascriptcssreactjsmaterial-uifont-face

What is the best way to add a triangle pointer to the Vuetify v-menu component?

Is there a way to insert a triangular pointer into the v-menu component of Vuetify 2.x? I am referring to this common feature found on web pages (as seen in this screenshot from Github): https://i.stack.imgur.com/DMOjF.png I have included sample code he ...

cssvue.jsvuetify.js

The Chrome application does not retain cookies

Why is the cookie url_user not being stored? Below is the content of index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- ...

javascripthtml

Working with JavaScript Arrays within a JSON file data

I am currently learning React and attempting to display random images from the Picsum website using their API. The JSON file I receive contains various information, but I am specifically interested in extracting the image URLs. Although it appears that my ...

javascripthtmlreactjsarraysjson

What is the method for setting the doctype to HTML in JavaScript or React?

I created a canvas with a height equal to window.innerHeight, but unexpectedly it seems to have 100% screen height plus an extra 4 pixels coming from somewhere. I came across a solution suggesting that I need to declare doctype html, but I'm unsure ho ...

javascripthtmlreactjscanvasdoctype