I am interested in layering two divs on top of each other, similar to the

This is a basic code snippet created using HTML and CSS. How can I achieve the effect of overlapping the green div on top of the white div? I have attempted to move the green div up, but increasing the margin-bottom value does not work.

#d3{
background-color: white;
border:0px solid transparent;
width:500px;
height:200px;

box-shadow: 0px 2px 2px #888888;
        -o-box-shadow: 0px 2px 2px #888888;
        -webkit-box-shadow: 0px 2px 2px #888888;
        -moz-box-shadow: 0px 2px 2px #888888;

}

#d4{
background-color: green;
border:0px solid transparent;
width:450px;
height:50px;
z-index:1;
margin-left: 20px;
margin-bottom: 100px;
margin-top: 20px;
box-shadow: 0px 2px 2px #888888;
        -o-box-shadow: 0px 2px 2px #888888;
        -webkit-box-shadow: 0px 2px 2px #888888;
        -moz-box-shadow: 0px 2px 2px #888888;
white-space: nowrap;
}
<p id="i3">Tabs with icons</p><br><br><br>
    <div id="d3">
    <br><br>
    <p>Lorem ipsum dolor sit amet, mattis nunc ligula nullam, sagittis dapibus magna feugiat, sit vel rutrum eros lacus vestibulum. Diam mauris venenatis ultricies, a donec fames placerat eget lacus dis, ut vestibulum, malesuada odio sem elementum erat nunc et, risus metus tortor vel in. Vestibulum in, nunc eu sed congue tincidunt dui, vulputate lectus nam ipsum. Justo donec, phasellus vitae tellus, felis duis massa fermentum, eu sem enim. Magna justo, est lectus non laoreet venenatis porta sed, pulvinar sit nulla enim, mauris duis nulla laoreet velit. </p>
    </div>
    <div id="d4">
    Lorem ipsum dolor sit amet
    </div>

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

htmlcss

Answer №1

In order to properly layout your div elements on the page, I suggest wrapping them and adjusting their order in the markup accordingly.

The wrapper should have a relative position so that it flows with the rest of the content, while the "green" div can be positioned using absolute positioning to ensure proper placement.

You can also add padding to the second div to adjust its content positioning as needed.

Alternatively, you may use negative margins to position the "green" div, but this approach will depend on how you plan to utilize it.

body {
  background: #eee;
}
.wrap {
  position: relative;
}
#d3 {
  position: absolute;
  left: 25px;
  top: -25px;
  width: 450px;
  height: 50px;
  background-color: green;
  z-index: 1;
  box-shadow: 0px 2px 2px #888888;
  -o-box-shadow: 0px 2px 2px #888888;
  -webkit-box-shadow: 0px 2px 2px #888888;
  -moz-box-shadow: 0px 2px 2px #888888;
  white-space: nowrap;
}
#d4 {
  background-color: white;
  width: 500px;
  padding: 35px 10px 15px;
  box-sizing: border-box;
  box-shadow: 0px 2px 2px #888888;
  -o-box-shadow: 0px 2px 2px #888888;
  -webkit-box-shadow: 0px 2px 2px #888888;
  -moz-box-shadow: 0px 2px 2px #888888;
}
<p id="i3">Tabs with icons</p>
<br>
<br>
<div class="wrap">
  <div id="d3">
    Lorem ipsum dolor sit amet
  </div>
  <div id="d4">
    <p>Lorem ipsum dolor sit amet, mattis nunc ligula nullam, sagittis dapibus magna feugiat, sit vel rutrum eros lacus vestibulum. Diam mauris venenatis ultricies, a donec fames placerat eget lacus dis, ut vestibulum, malesuada odio sem elementum erat nunc
      et, risus metus tortor vel in. Vestibulum in, nunc eu sed congue tincidunt dui, vulputate lectus nam ipsum. Justo donec, phasellus vitae tellus, felis duis massa fermentum, eu sem enim. Magna justo, est lectus non laoreet venenatis porta sed, pulvinar
      sit nulla enim, mauris duis nulla laoreet velit.</p>
  </div>
</div>

Answer №2

Check out this example that demonstrates the solution you're looking for.

If you want to make your own example function properly, just adjust the margin-top property of your #d4 element to be -225px (which is half of its height).

margin-top: -225px;

Answer №3

To position the #d4 element on top of another element, you should apply the following CSS:

position: absolute;
top: 100px;

Make sure to adjust the top value as needed for accurate positioning. For more details on how positioning works, check out this resource.

Here is the updated code snippet with the necessary CSS modifications:

#d3 {
         background-color: white;
         border: 0px solid transparent;
         width: 500px;
         height: 200px;
         box-shadow: 0px 2px 2px #888888;
         -o-box-shadow: 0px 2px 2px #888888;
         -webkit-box-shadow: 0px 2px 2px #888888;
         -moz-box-shadow: 0px 2px 2px #888888;
      }

      #d4 {
          position: absolute;
          top: 100px;
          background-color: green;
          border: 0px solid transparent;
          width: 450px;
          height: 50px;
          z-index: 1;
          margin-left: 20px;
          margin-bottom: 100px;
          margin-top: 20px;
          box-shadow: 0px 2px 2px #888888;
          -o-box-shadow: 0px 2px 2px #888888;
          -webkit-box-shadow: 0px 2px 2px #888888;
          -moz-box-shadow: 0px 2px 2px #888888;
          white-space: nowrap;
      }
      
<p id="i3">Tabs with icons</p><br><br><br>
        <div id="d3">
        <br><br>
        <p>Lorem ipsum dolor sit amet, mattis nunc ligula nullam, sagittis dapibus magna feugiat, sit vel rutrum eros lacus vestibulum. Diam mauris venenatis ultricies, a donec fames placerat eget lacus dis, ut vestibulum, malesuada odio sem elementum erat nunc et, risus metus tortor vel in. Vestibulum in, nunc eu sed congue tincidunt dui, vulputate lectus nam ipsum. Justo donec, phasellus vitae tellus, felis duis massa fermentum, eu sem enim. Magna justo, est lectus non laoreet venenatis porta sed, pulvinar sit nulla enim, mauris duis nulla laoreet velit. </p>
        </div>
        <div id="d4">
        Lorem ipsum dolor sit amet
        </div>

Answer №4

Solution:

You must include the CSS property position:relative for #d3 and insert these lines into #d4:

position:absolute;
  bottom:70px;
  left:6px;

Below is a functional code snippet:

#d3{
background-color: white;
border:0px solid transparent;
width:500px;
height:200px;
box-shadow: 0px 2px 2px #888888;
-o-box-shadow: 0px 2px 2px #888888;
-webkit-box-shadow: 0px 2px 2px #888888;
-moz-box-shadow: 0px 2px 2px #888888;
position:relative;

}

#d4{
background-color: green;
border:0px solid transparent;
width:450px;
height:50px;
z-index:1;
margin-left: 20px;
margin-bottom: 100px;
margin-top: 20px;
box-shadow: 0px 2px 2px #888888;
-o-box-shadow: 0px 2px 2px #888888;
-webkit-box-shadow: 0px 2px 2px #888888;
-moz-box-shadow: 0px 2px 2px #888888;
white-space: nowrap;
position:absolute;
bottom:70px;
left:6px;

}
<p id="i3">Tabs with icons</p><br><br><br>
    <div id="d3">
    <br><br>
    <p>Lorem ipsum dolor sit amet, mattis nunc ligula nullam, sagittis dapibus magna feugiat, sit vel rutrum eros lacus vestibulum. Diam mauris venenatis ultricies, a donec fames placerat eget lacus dis, ut vestibulum, malesuada odio sem elementum erat nunc et, risus metus tortor vel in. Vestibulum in, nunc eu sed congue tincidunt dui, vulputate lectus nam ipsum. Justo donec, phasellus vitae tellus, felis duis massa fermentum, eu sem enim. Magna justo, est lectus non laoreet venenatis porta sed, pulvinar sit nulla enim, mauris duis nulla laoreet velit. </p>
          <div id="d4">
    Lorem ipsum dolor sit amet
    </div>
    
    </div>

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

Unable to display an image element in fullscreen within a modal that is already fullscreen

I am facing an issue with my modal that is designed to occupy the full width and height of a browser. Inside this modal, there is an image enclosed within a div along with some other elements. My goal is to make the image go full screen in the browser, aki ...

javascriptjqueryhtmlcss

JS code query to specifically target iOS devices

What are the steps to develop a website that can only be accessed by iOS users? In other words, if someone is using Windows or Android, they would be blocked from accessing the site with a message suggesting they download it on Android instead. Additional ...

htmlreactjsreact-native

Overlap of sub menus

Seeking assistance from a CSS expert for a challenge I am facing. I am currently working on a toggle menu for mobile view, and encountering issues with the submenu. Any list item placed below another one with children is not visible. Removing the parent l ...

javascriptcss

Craft a Flawlessly Repeating Sound Experience - Online

I'm facing a challenge in creating a flawless loop of an audio file. However, all the methods I've tried so far have resulted in a noticeable gap between the end and the start. Here are the approaches I experimented with: The first approach inv ...

javascripthtmlaudiohtml5-audioweb-audio-api

What causes Firefox (Mobile) to zoom out of my webpage?

After launching my webpage on Google Chrome mobile (android), everything loads perfectly. However, when trying to access the site using Firefox mobile (android), most pages load in a zoomed-out view. The issue is resolved by opening the drop-down menu, but ...

htmlcssfirefox

What is the best way to ensure a table cell remains fixed to the top and left side of the table simultaneously?

My table with a sticky header is giving me trouble. I initially set the position property as position:sticky; top:0;, and then tried to overwrite it for the first column using position:sticky; **left:0**;. However, the heading of column 1 remains sticky on ...

htmlcsshtml-tablebootstrap-4sticky

Material-UI icons refusing to show up on the display

I've been working on creating a sidebar component and importing various icons to enhance the UI, but for some reason they are not displaying on the screen. I even tried other suggested solutions without success. <SidebarOption Icon = {InsertComment ...

javascriptcssreactjsmaterial-uistyled-components

Attempting to extract data from an HTML table and store it in an array using JavaScript with the help of jQuery

Currently, I am faced with a challenge involving extracting values from an HTML table and storing them in a 2-dimensional array using JavaScript. jQuery seems like the ideal solution for this task. While I have managed to get the indices working properly, ...

jqueryhtml

Troubleshooting problem regarding the use of visibility: hidden; and transition property in HTML

HTML Code: <link rel="stylesheet" type="text/css" href="s.css"/> <div id="xd"><ul>a</ul><</div> CSS Code: #xd ul { visibility: hidden; transition: all 1s; } When viewing this code on Chrome version 27, the "a" e ...

htmlcss

The dropdown menu is erroneously showing buttons instead of the intended options

My dropdown function is causing a small issue. The desired behavior is that if the selected value is "", labeled "Please Select" in the dropdown menu (I've added a comment in the function to pinpoint the problem), then buttons A, B, and C should not b ...

javascripthtmlbuttondrop-down-menu

Having trouble submitting the content from my textArea within the form and sending a POST REQUEST

HTML I have created a form to send requests to my server. <form action="/compose" method="post"> <div style="margin-bottom: 1rem; margin-top: 2rem;"> <label for="exampleInputEmail1" class ...

htmlnode.js

What is causing the alt or title tags to not function properly in emails?

I am currently facing an issue with e-mail templates that include images. The problem arises from the fact that these images need to be downloaded before they can be displayed in the email. To work around this, I always use ALT and TITLE tags to provide de ...

htmlemailoutlookhtml-email

Random image generator using jQuery on the home page body

Hey guys, I'm working on a cool feature for my Wordpress site where a random background image loads every time the homepage is refreshed. Check out the code snippets below: First, here's what I have in my style sheet (style.css): body.home { ...

phpjqueryhtmlcsswordpress

Enhancing the Angular Currency Pipe to display zeros after the decimal point

Using Angular has strict requirements for displaying full numbers received from the backend. In some cases, like with "123.450" and "123.45," the amount may be the same but clients prefer to see the complete number. <td>{{ material.customerPrice | ...

htmlangularangular-pipe

Steps for creating a table with a filter similar to the one shown in the image below

https://i.sstatic.net/zR2UU.png I am unsure how to create two sub-blocks within the Business A Chaud column and Potential Business Column. Thank you! I managed to create a table with input, but I'm struggling to replicate the PUSH & CtoC Column for ...

javascripthtmlangulartypescriptangular-material

Enhancing a Vue component by including two dynamically computed class properties within a :class="{{}} {{}}" tag

As a newcomer to the Vue world, I have been experimenting with applying 2 computed properties to a :class attribute. Initially, I tried separating each property by a space like this: :class="{{prop1}} {{prop2}}", but upon reload, all content would disappea ...

cssvue.jsvuejs2computed-properties

The highlight_row function seems to be delayed, as it does not trigger on the initial onClick but works on subsequent clicks. How can I ensure it works properly right from the first click?

I developed an application using the Google JavaScript Maps API to calculate distances between addresses. I've encountered a bug where the row in the table is not highlighted on the first click, requiring a second click for the highlighting to take ef ...

javascripthtmlcssreactjsgoogle-maps

Obtain the predecessor of the element that was clicked

I have a complex structure with nested tables, rows, and cells, each containing div elements with multiple spans. I am trying to create a function that will capture the clicked cell every time I click on either the cell itself or any of its child elements ...

javascripthtmlcss

JavaScript Div Splitter with Event Handling

I am developing a basic HTML DIV splitter and have set the cursor as col-resize for it. I want the cursor to remain as col-resize while dragging the splitter, but if the mouse moves beyond the resize boundary, the cursor should revert back to its default s ...

htmljquerycssjquery-events

Getting rid of a particular jQuery animation

I have been searching all over the site, but my limited knowledge prevented me from finding the right solution. I've been working on my website and had previously used a different theme. I have made several changes and am quite happy with it overall. ...

javascriptjqueryhtmlcss