Is there a way to stack multiple divs on top of each other in my HTML login page?

Below is the HTML code for my form:

<div style="display:block; margin:0 auto;">
    <h2>Welcome</h2>
</div>
<div id="box">
    <div id="box2">
        <p id="pid"><b>Emp no:</b></p>
        <input type="text" id="id" size="30" maxlength="11" onkeypress="return event.charCode != 32">
        <p id="ppass"><b>Password:</b></p>
        <input type="password" id="pass" size="30" maxlength="30">&ensp;<i class="far fa-eye-slash"></i><br><br><br><br>
    </div>
</div>
<div id="box1">
    <button id="login">Sign in</button>
</div>

The following is the CSS code:

#box{
    text-align: center;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    height:auto;
    z-index: -1;
    margin:0 auto;
    width: 25em;
    border-radius: 8px;
    background-color: #cbeef1;
    padding:10px 10px 10px 10px;
}
#box2{
    display: inline-block;
    margin: 0 auto;
}
 
#box:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#box1{
   display: table;
   margin-left: auto;
   margin-right: auto;
}
#login{
    border-radius: 6px;
    cursor: pointer;
    font-size: medium;
    padding: 5px;
}
h2{
    background-color: aliceblue;
    font-size: medium;
    padding: 10px 10px 10px 10px;
    width: 5em;
    border-style: solid;
    margin: 0 auto;
    display:block;
}

This is what is being displayed:

View output here

In the image provided, I need the button and the h2 elements to overlap with the box div. Additionally, I want the input fields to line up neatly, similar to the image shown below:

Expected result

I would appreciate any guidance on achieving this effect.

For a live demonstration, visit my fiddle: here

htmlcss

Answer №1

Place the button and h2 elements inside the container with id #box. Next, utilize negative margins to create an overlapping effect between them.

#box {
  text-align: center;
  margin: 2em auto 0;
  width: 25em;
  border-radius: 8px;
  background-color: #cbeef1;
  padding: 1em;
}

h2 {
  background-color: aliceblue;
  font-size: medium;
  padding: 10px;
  width: 5em;
  border-style: solid;
  margin: -2em 0 0 1em;
}

#login {
  border-radius: 6px;
  cursor: pointer;
  font-size: medium;
  padding: 5px;
}

#last {
  margin: 2em 0 -30px;
}
<div id="box">
  <h2>Welcome</h2>
  <p><b>Emp no:</b></p>
  <p><input size="30" maxlength="11"></p>
  <p><b>Password:</b></p>
  <p><span style="visibility: hidden;">👁️ </span><input size="30" maxlength="30"> 👁️</p>
  <p id="last"><button id="login">Sign in</button></p>
</div>

Answer №2

To create the layout you want, utilize the CSS position property. Check out this sample CSS code for guidance:

    #container {
  position: relative;
  text-align: center;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.5s;
  height:auto;
  z-index: -1;
  margin:0 auto;
  width: 25em;
  border-radius: 8px;
  background-color: #cbeef1;
  padding:10px 10px 10px 10px;
}

#centeredContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loginButton {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

h2 {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: aliceblue;
  font-size: medium;
  padding: 10px 10px 10px 10px;
  width: 5em;
  border-style: solid;
  margin: 0 auto;
  display:block;
}

#usernameInput, #passwordInput {
  display: block;
  margin: 0 auto;
}

Explanation:

The use of position: relative on the #container element establishes it as the reference point for its absolutely positioned child elements.

  • #centeredContent is centered within #container with position: absolute, top: 50%, left: 50%, and transform: translate(-50%, -50%).

  • The #loginButton sits at the bottom of #container using position: absolute, bottom: -20px, left: 50%, and transform: translateX(-50%).

  • The h2 header is placed at the top of #container by utilizing position: absolute, top: -20px, left: 50%, and transform: translateX(-50%).

  • #usernameInput and #passwordInput are centered inside #centeredContent through display: block and margin: 0 auto properties.

By making these adjustments, the button and h2 header will overlay the container, while the input fields will align perfectly from a common starting point.

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

Exploring Navigation States with JQuery: Active, Hover, and Inactive

I've been struggling with the code below as it doesn't seem to be working. I had a simpler code before for swapping images, so if there's an easier way to achieve this, I'm open to suggestions. Just to recap, I'm trying to: 1. La ...

jquerycssmenuhover

Guide to vertically centering Font Awesome icons inside a circular div

Is there a way to perfectly center align font awesome icons vertically? I have tried using the line-height property when text is present, and even setting the line-height equal to the height of the div. Attempts with display:inline-block and vertical-alig ...

htmlcss

Are section elements aware of their positional order in the document structure?

For the Terms of Service page, I decided to incorporate both the ol element and the section element for two specific reasons: Ensuring each item is guaranteed in sequential order Allowing each part to be sectioned off individually ol { list-style ...

htmllanguage-lawyeraccessibility

A step-by-step guide on ensuring mandatory completion of all input fields prior to form submission

I'm new to JavaScript and I need some help. Currently, I am trying to implement input field validation using pure JavaScript for a form. However, I am facing an issue where the "Required" message only appears next to the last name input. What I want ...

javascripthtmlformsdom-events

Load the entire AngularJS webpage using AJAX requests

I'm facing a challenge where I need to integrate an entire legacy page, along with some AngularJS elements, into our new page using AJAX. Initially, all I could see was the raw AngularJS markup: Rank ID {{$index+1}} {{player.playerid}} Afte ...

javascriptjqueryhtmlangularjsajax

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

javascripthtmlgoogle-chrome

Tips for correctly center aligning a Div element

I'm facing some challenges with properly centering my website It appears to be centered when I zoom out. However, for users who don't zoom out, it looks misplaced. Do you have any suggestions? The site was built using all AP divs and even with a ...

htmlcss

My HTML table is not printing at full width

Seeking assistance with creating a printable calendar using an HTML table. The calendar prints perfectly on a Mac, but when attempted on Windows in all browsers, it adds a 3" margin at the top regardless of CSS print settings. The client requires the cal ...

htmlcssprintinghtml-table

Sticky Sidebar Attached to Parent Container with Smooth Sliding Effect

Is it possible to have my sidebar push the content across when opened, while keeping the fixed navigation relative to its parent element instead of the viewport? The sidebar works fine in Firefox but breaks out of the parent in Chrome. Link to JSFiddle & ...

jqueryhtmlcss

Transferring information from an HTML form to a C# webservice through AJAX

I've created a form in HTML using Bootstrap within PHPStorm, and now I want to send the information to a C# webservice using AJAX. However, I'm unsure about what to include in the AJAX URL section (shown below). Here is the HTML/Bootstrap form I ...

c#jqueryhtmlajaxweb-services

How can I turn off the animation for a q-select (quasar select input)?

I'm just starting out with Quasar and I'm looking to keep the animation/class change of a q-select (Quasar input select) disabled. Essentially, I want the text to remain static like in this image: https://i.stack.imgur.com/d5O5s.png, instead of c ...

javascriptcssvue.jsquasar-framework

Arrange Bootstrap columns based on the available space within a loop

The content is contained within a md-8 div and generated through a PHP loop. The loop includes sections for: 1. about us 2. areas we cover 3. job board 4. candidates 5. join us 6. contact Due to the limited height of the "areas we cover" section, th ...

phpcsswordpressbootstrap-4

Ways to calculate outcome

I'm fairly new to PHP and have run into an issue regarding displaying the number of results. For example, showing 'There are 200 results'. Thank you in advance. Below is the code I am working with: try { $bdd = new PDO("mysql:host=localho ...

phphtmlcsssqlcount

Having trouble with the ".." shorthand not working in the HTML image directory path

My Website File Structure: -css - home.css -html - index.html -images - banner.png HTML Code: <!DOCTYPE html> <html lang="en"> <head> <title>myWebsite</title> <link rel="stylesheet" typ ...

htmlimagepath

The CSS code seems to be ineffective when attempting to center elements with a specific width in react.js

Hey everyone, I'm currently working on developing a web application using react-bootstrap and I've encountered an issue with adjusting the width of my row and centering it. I have already created the necessary CSS and JS files, but I am unable to ...

cssreactjsreact-bootstrap

Learn how to dynamically apply a CSS attribute for a set period of time using jQuery and automatically revert it back to its original state after 2 seconds

Is there a way to apply a CSS attribute to a specific element (like a div) for only 2 seconds? Here is what I have tried so far: HTML: <div class="custom-div">bar</div> <input class="button" type="button" value="press me" /> JQuery: $ ...

javascriptjqueryhtmlcss

Ways to center items in a row-oriented collection

When dealing with a horizontal list, the issue arises when the first element is larger than the others. This can lead to a layout that looks like this. Is there a way to vertically align the other elements without changing their size? I am aware of manual ...

htmlcss

A guide on using Selenium to interact with a doughnut pie chart element

I am having difficulty performing a click event on the colored ring part of this doughnut pie chart. Currently, I can locate the element for each section of the chart, but the click event is being triggered in the center of the chart (empty inner circle) w ...

javascripthtmlseleniumselenium-webdriverxpath

PHP table not displaying data

I am brand new to this and currently enrolled in a class with an unhelpful professor. I am attempting to read data from a file into a table, but for some reason the data is not displaying. I have tried multiple approaches, but I am feeling quite lost. Any ...

phphtml

Creating a menu bar in jQuery that functions similarly to tabs, but without the need to change divs

Currently, I am exploring ways to create tab functionality similar to jQuery's tabs plugin but without the need to switch between DIVs. Essentially, I am looking for a jQuery plugin that solely handles rendering the tab bar and allows me to designate ...

jquerycss