Stack div on top of div

It seems like I'm facing a simple problem that needs a solution.

I have two container divs

.topwrap{
        position:relative;
        top:100px;
        background:#00C;
    

}

and

.lowerwrap{
        position:relative;
        top:100px;
        background:#00C;
    }
    

However, for some unknown reason, .lowerwrap is staying above .topwrap. Inside these containers are images positioned correctly, but I can't seem to get .lowerwrap to go directly below .topwrap.

I apologize if my explanation isn't clear enough.

Best regards

(full code)

/*---------------------------- Header ----------------------------*/
        .headerwrap{
            position:relative;
        }
        /* other header styles */
        
        /*---------------------------- Main Work ----------------------------*/
        /* main work styles */
        
        /*----------------------------Top ----------------------------*/
        .topwrap{
            position:relative;
            background:#00C;
            height:auto;
        }
        /* other top styles */

        /*----------------------------Lower----------------------------*/
        .lowerwrap{
            position:relative;
            background:#00C;
        }
    

<!--===================================================Header===================================================!-->
        <div class="headerwrap">
            <div class="header">
                    <img src="images/header.png" />
                <div class="logo">
                    <img src="images/logo.png" />
                </div><!--close logo-->
                <div class="menu">
                    <ul class="menutxt">
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="about.html">PORTFOLIO</a></li>
                        <li><a href="manga.html">CONTACT</a></li>                 
                    </ul>
                </div><!--close menu-->
            </div><!--close header-->
        </div><!--close headerwrap-->
     <!--===================================================Top===================================================!-->
        <div class="topwrap">
            <div class="face">
                <img src="images/face.png"/>
            </div><!--close face-->
            <div class="speech">
                <img src="images/speech.png"/>
            </div><!--close speech-->
        </div><!--close topwrap-->
    <!--===================================================Lower===================================================!--> 
        <div class="lowerwrap">
            <p>dsadsadasd</p>
        </div><!--close topwrap-->   
    </body>
    </html>
    

Answer №1

Instead of using top, you can try this approach:

.topwrap{
    clear: both;
    position:relative;
    float: left;
    background:#EEE;
    margin-top: 100px;
}

 .lowerwrap{
    position:relative;
    float: left;
    background:#555;
    display: block;
}

You can view a simple fiddle I created here: https://jsfiddle.net/6xj5snv2/

Answer №2

To accomplish this, utilizing z-index is necessary. Remember that the div with a higher z-index will appear on top, so I recommend assigning z-index:2 to .topwrap and z-index:1 to .lowerwrap. More information can be found here.

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

Creating custom CSS for Styled Components in ReactJS

I'm struggling with CSS in React using styled components. Below is the code snippet I am working with: import React from 'react'; import { Navbar, Container, Row, Col } from 'reactstrap'; import styled from 'styled-components& ...

Whole page scrolling instead of just inner div scrolling

Once again, I find myself tinkering with CSS... In the current setup, the map container is scrolling on its own, separate from the rest of the content within the container. How can I enable the entire page to scroll when additional content is added to the ...

How can I make multiple elements change color when hovering with CSS?

Hey there! I have a little design challenge that I need help with. On my website (), I am trying to make multiple elements of a specific item change color when the user hovers over the text. If you hover over the "more" menu item, you'll notice that o ...

Is your browser tab failing to display the complete URL?

Encountering a strange issue while working on my current website project: When you click on "about," it does take you to the correct page, but upon refreshing the page, it redirects back to the home page. The same scenario is happening with other pages as ...

Header becomes distorted while scrolling down, then returns to normal when scrolling back up

Something strange is happening on my client's website. Whenever I scroll down and then back up, the header displays a large white area where the address/contact bar should be. You can see it in action on the site: rijschool-wolvega.nl I'm not w ...

What is hindering the responsiveness of this HTML table?

I recently designed a schedule table that resizes properly in the browser, but when I tried to access it on my mobile phone, it didn't resize correctly. On my phone screen, half of Thursday was cut off due to the horizontal scroll. https://i.sstatic. ...

Retrieve the HTML code from a webpage on a different domain

Looking to extract HTML from another domain. Attempted solution: $.get("http://website1.com", function(data) { alert("Data Loaded: " + data); }); (not working) For example, as the owner of two websites: website1.com website2.com Now, the goal is to ret ...

Using jQuery to iterate over a multi-dimensional array and showing the child elements for each parent array

I am facing an issue with a multidimensional array that contains objects and other arrays. While it is simple to loop through the parent array and display its contents in HTML, I encounter a problem when there are multiple layers of arrays nested within ea ...

What is the most efficient way to populate a dynamic table in a form with a user's past responses using PHP?

Explaining my thought process through a complex title might be challenging, but let me provide an example to clarify: Imagine I am requesting the user's favorite Rock albums, including albumName and albumArtist. Initially, there is a table with one r ...

How can I properly integrate jQuery libraries, along with CSS, in a create-react-app project?

I'm currently working on incorporating the select2 jquery library into my React application, which was created using create-react-app. After adding jquery and select2 to my package.json file, I was able to get the javascript functionality to work pro ...

What key element is not included in this code?

I've been trying to create an interactive green circle that switches between red and green when clicked. Despite checking and rechecking my code, it's still not functioning correctly. I must be making a beginner mistake somewhere. Can anyone poin ...

ShadCn UI ResizablePanelGroup effortlessly grows within the available area without the need to set a specific height

I'm facing a CSS challenge with the ResizablePanelGroup component. My layout includes a header and a ResizablePanelGroup with 4 panels. The page should take up 100% of the viewport height, and I want other components to be placed within it. Once the H ...

What could be the reason for the compatibility issues between CSS/SASS modules and a third-party library?

I am puzzled by the fact that my sass modules do not affect the third-party component I am using, specifically react-horizontal-scrolling-menu <ScrollMenu selected={selected} scrollToSelected={true} data={items && items.map((item: any) ...

Jquery draggable droppable does not support displaying multiple divs simultaneously

I tried to implement the jquery ui draggable and droppable features to display 3 divs within a designated area. Below is the code snippet: --CSS: #content-1 { width: 200px; height: 100px; border: 1px solid red; display: none; } #content-2 { width: ...

Lightbox2 is looking to reposition the caption to the right of the image

Can anyone help me understand how to move the caption, found in data-title, from underneath an image to the right of the image? I'm not very familiar with HTML/CSS, but it looks like the image is enclosed within a div called .lb-outerContainer, and t ...

The video element in HTML5 is not showing up on Safari browsers, but it is functioning properly on Chrome

I have set up a video slider on my webpage. You can view the site The code is functioning perfectly on Chrome and iOS Safari, but there seems to be an issue on desktop browsers. When inspecting the page in Safari, the video elements are present in the HTM ...

The :root selector has encountered a malfunction within the Angular component

I'm interested in experimenting with CSS variables in my Angular 11 component. <div class="main-content"> <a>Test Link</a> </div> Here is my app.component.css: div.main-content{ --main-color: red } a{ color: v ...

JavaScript Image Swap

I tried implementing this script but it didn't work for me. I'm not sure what to do next, so I'm reaching out for help. The script is at the top of the page, followed by a picture with an id that I'd like to change when a button below i ...

The CSS keyframe for mobile devices initiates from 100% and then proceeds to animate

Having some trouble with CSS animations on mobile devices. The animation works perfectly fine on desktop, but on mobile, it seems to display the final 100% keyframe first before animating from 0%. I've tried adding the initial style directly to the cl ...

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

Looking to highlight a range of days horizontally in jQuery UI Datepicker with the multiselect plugin. To achieve this, I am utilizing the :before and :after pseudoelements of the a tags. .ui-state-highlight a:before, .ui-state-highlight a:after { con ...