When two elements overlap, adjust their CSS positions to ensure responsiveness

Is there a way to adjust the position of an element when it comes into contact with another?

Check out this example http://jsfiddle.net/mZYR8/1/

In the example, if .title-wrap (yellow) touches .right-wrap (orange), I want the orange element to slide underneath the yellow element.

<div class="wrap">
    <div class="title-wrap">
        <h1>Lorem Ipsum Dolor</h1>
    </div>
    <div class="right-wrap">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</div>
<style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    .title-wrap {
        background-color:yellow;
        display:inline-block;
    }
    h1 {

        font-size:20px;
        line-height:40px;
    }
    .right-wrap {
        position:absolute;
        display:inline-block;
        right:0px;
        top:0px;
        background-color:orange;
        padding:20px;
    }
    .right-wrap span {
        display:inline-block;
        width:20px;
        height:20px;
        margin-right:10px;
        background-color:purple;
    }
</style>

Update to clarify the question regarding "yellow underneath"

If one element makes contact with another, I want to change

position:absolute;
right:0px; 

to position:relative; resulting in the following:

I am open to making any necessary changes and can also incorporate JavaScript. However, if possible, I prefer achieving this effect using CSS only.

Thank you for your assistance!

Answer №1

My solution involves floating the element to the right side.

If you have a better idea, please don't hesitate to share it with us.

This method has been successful for me so far.

See my code in action here

.right-wrap {
    float: right;
    display: inline-block;
    right: 0px;
    top: 0px;
    background-color: orange;
    padding: 20px;
}

Answer №2

To position one element above another, utilize the CSS property z-index.

.right-wrap {
    position:absolute;
    display:inline-block;
    right:0px;
    top:0px;
    background-color:orange;
    padding:20px;
    z-index:-1;
}

Also:

.title-wrap {
    background-color:yellow;
    display:inline-block;
    z-index:1;
}

This method should work effectively as elements with higher z-index values appear on top.

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

How can I prevent a browser from caching a CSS file when the file is updated?

I have a primary layout file that is utilized in the majority of views. Within this layout, I am integrating a module using the Grails resources plugin. <r:require module="core"/> The definition of modules can be found in the conf/ApplicationResour ...

Unconventional appearance of WordPress Jetpack sharing buttons on unique custom theme

Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

I am facing multiple challenges and working towards finding solutions. I have developed a webpage and now I want to redirect the link to the CSS file based on the user agent. `<script type="text/css" src="style.css"> </script>` However, inst ...

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 ...

The application is experiencing issues with loading Django's CSS files properly

When working on my Django application, I've noticed that the CSS code being loaded differs from what is written in the files. What could be causing this discrepancy and how can it be fixed? ...

The total height of the document's body in jQuery is not equal to the sum of the viewport height and the window's scroll top position at the bottom of the document

Why does the document height appear smaller than the window scroll top value plus the viewport height when I reach the end of the document? Shouldn't they be equal? I've been struggling with this issue for hours and can't seem to figure it o ...

How to Align col-md-5 in the Center Using Bootstrap?

Is anyone else struggling with this dilemma or is it just me? I've been searching everywhere for a solution to my problem but I can't seem to find one. According to the grid system, if you have a column size of col-md-5, centering it should be ...

Prevent the overlap of text by controlling the positioning of a div element

Below is a simplified version of the layout I'm working with: <div style="position: relative; width:600px;"> <p>Content with unknown length, but very lengthy</p> <div>Content with unknown height</div&g ...

Table featuring alternating background colors for rows and a distinct header design

Incorporating CSS, I have managed to style my rows in alternating colors. Take a look at the code snippet below: Fiddle tr:nth-child(odd) td { background-color:red; } tr:nth-child(even) td { background-color:blue; } tr th { background-color: yellow} ...

What is the process for obtaining Style.css, additional CSS, and JavaScript files from a live single page website?

I am currently facing a challenge with a live single page website where I need to make some fixes. Unfortunately, I am unable to access the Style.css file, along with other css and javascript files. Although I managed to save the html file by using Ctrl+s, ...

Having issues with the Bootstrap tabs code provided in the documentation not functioning correctly

Exploring the world of Bootstrap 5 tabs led me to copy and paste code from the official documentation (https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior), but unfortunately, it's not functioning as expected: clicking on a tab does ...

Get rid of the border surrounding a main call-to-action button

While trying to override Bootstrap styles, I encountered a problem. Whenever the user presses a primary button <button class="btn btn-primary">Test</button> An annoying blue outline appears and I can't seem to remove it. I attempted to o ...

Tips for verifying if two passwords match during registration and displaying an error message if they do not match

How can I ensure that the passwords entered in a registration form match and how do I validate the entire form to be correct? <form id="registerForm" method="POST" action="/register" class="form2"> ...

Is it possible to create a CSS-only negative border radius?

I'm reaching out for help with a specific issue. I want to create a unique negative border radius for my navigation links, similar to the design shown in this image: http://prntscr.com/9vi0b5 Instead of using images like in the example, I'm look ...

What is the reason behind text underline being disabled when using "hidden: overflow" in CSS?

I have a long text string that I want to auto-shorten using CSS with text-overflow: ellipsis, but it's removing the underline from my link. Here is the code: NORMAL .link { font-weight: bold; cursor: pointer; color: black; text-decorat ...

Creating a dynamic animation for a navigation bar's underline

I'm attempting to add a smooth underline effect to the links in my navbar when they are hovered over. Unfortunately, the entire ul element is being underlined instead of just the selected link. Is there a way to resolve this issue? a { text-deco ...

Styling the elements that are next to each other using CSS

Hey there, what if I have HTML elements structured like this: <div> <div>Name</div> <div><input type="text" class="check"> <div>Age</div> <div><input type="number" class="check"></div> ...

Header element not keeping the navbar at the bottom

My goal is to attach this navigation bar to the bottom of a header, but it's sticking to the top instead. I want the navigation to remain at the bottom of the header even when the user scrolls down. Currently, both the header and navigation are set t ...

Move a sub-division horizontally within a parent element that has a full width of 100%

I am currently incorporating some jQuery features into my website. The concept involves expanding the parent div to 100% width for responsive design as you scroll down the page, which works perfectly. Simultaneously, I aim to translateX the child div so th ...

Encountering a Tailwindcss error while attempting to compile the CSS file

Struggling to grasp Tailwind CSS as I try to compile the CSS but keep encountering errors. Despite following numerous tutorials, this persistent error continues to hinder my progress. This is the specific error message that keeps popping up: $ npm run bui ...