What is the best way to stick a div to the top of another div?

I'm attempting to have the white div appear on top of the grey div, rather than underneath it as shown in the screenshot.

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

This layout is being built using Bootstrap 4.

.form-login {
    text-align: center;
    background: #ffffff;
    border-radius: 25px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.biside-form-login {
    text-align: left;
    background: #cecece;
    border-radius: 25px;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: -10px;
}
<div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
        <div class="col-4 form-login">
         this is the white div
        </div>
        <div class="col-8 biside-form-login">
              this is the grey
        </div>
    </div>
</div>

htmlcssbootstrap-4

Answer №1

One method to control stacking order is by using the 'z-index' property. Here's an example:

.form-login {
    position: relative;
    text-align: center;
    background: #ffffff;
    border-radius: 25px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    z-index:999;
}

Answer №2

Utilize the power of the z-index feature within the white section.

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

What is the best way to position a Bootstrap button on top of a stretched link?

Seeking assistance with creating a Bootstrap 4 card that includes a stretched link and a separate button with a different URL. Despite following Bootstrap's documentation on avoiding multiple links with stretched links, I am unable to get it to work a ...

twitter-bootstrapbootstrap-4bootstrap-cards

Update the button text dynamically when clicked without using an identifier or a class

If we take a look at my button in the following code: <input type="button" value="BLUE" name="button_blue" /> My goal is to have the value="BLUE" changed to value="RED" or any other desired value when the button is clicked. ...

javascriptjqueryhtml

Apply CSS styles when clicked and remove them when clicked again

I have successfully set a style when clicking on a div. However, I am looking to reset the style to default when clicked again. $('#tray-button').click(function() { $('.buttons-content').css('bottom', '160px& ...

cssonclickstyles

Automatically adjust image size to match viewport dimensions without cutting off edges

I am facing a CSS challenge. The issue is with an image that has dimensions of 1024x500 pixels. When the browser window size decreases below the width of the image (1024px), the image starts to get cropped on the sides. I have set the container width to 10 ...

cssbrowserviewportimage-resizing

The margin-left property is not functioning properly on the second <td> element

Displaying a table with two cells positioned next to each other: <table> <td disabled>Content for the first cell</td> <td style="margin-left:100px;" disabled>Content for the second cell</td> </table> Despite us ...

htmlcsshtml-table

Tips for displaying two dynamic variables that are interdependent

For instance: Controller: AllBooks[{ book1:{ hardcover{price:25.99},e-book{price:1.99} } }, book2:{ hardcover{price:60.00},e-book{price:2.99} }]; $scope.bookchoice = function(selectedBook) { $rootScope.choice = selectedBook;} $scope.booktype = functio ...

javascripthtmlangularjsionic-framework

Unresponsive Toggle Button on Bootstrap Navigation Bar

Whenever I resize the window and try to click the navigation toggle button, it doesn't seem to work. The button is unresponsive. Can someone please help me figure out what the issue could be? <nav class="navbar fixed-top navbar-expand-lg navba ...

htmlcssbootstrap-4

Is there a way to embed a span within a word without causing it to break during wrapping?

As I create a lyrics sheet with chords, I'm facing an issue. Placing the chord (as a span) inside a word for precise positioning causes the word to split in half when the line wraps. How can I prevent this from happening? https://i.sstatic.net/GlNYb. ...

htmlcssword-wrap

Following the build in Angular, it only displays the index.html file and a blank screen

According to the information on Angular's official website, running the "ng build" command should generate files in the dist folder ready for hosting. However, after running this command, the index.html file is empty except for the page title. When yo ...

htmlangulartypescriptweb

I'm curious as to why these two divs are positioned side by side. Can anyone shed some light on why this footer isn't functioning properly

My goal is to showcase the logo along with 3 buttons containing all the social media links underneath it. However, for some reason, my 2 divs are displaying inline instead of flex or block. Can anyone shed light on why this isn't functioning as expect ...

htmlcssdeploymentfooter

Body overflow appears horizontal in Windows Operating System while it works fine in macOS

After implementing the code below from a helpful CSS Tricks article, my element spanned across the full width of the page, stretching beyond its parent's boundaries: width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin- ...

htmlcss

Changing the heading color based on a condition with uib-accordion

I am currently utilizing angular-ui in conjunction with my AngularJS application. One component I have on my page is an accordion (uib-accordion) element, where the content, name, and state (opened/closed) are bound to an array in the controller. The desi ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

Rails assets folder is not directed to the specified directory in the layout file

I have a dilemma in the application layout where I'm referencing assets (js, css, and img) in the public/assets/... directory. For example: <link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-pre ...

javascriptcssruby-on-railspathassets

What could be the reason my dropdown menu is not appearing on hover?

Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box. I have been referring to this sample code for guidance. Instead of pasting all my code here, I can summarize what I have come up with: var a ...

javascripthtmlcssangularjsgoogle-apps-script

Elements with fixed positions in CSS overlapping one another

Hey there, I'm working on a navigation bar and using Jquery to resize elements for better website aesthetics. Instead of a traditional horizontal list, each button is created individually with images: <a href="#" class="button" id="home"><im ...

css

Speeding up the loading time of my background images

body { background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed; background-size:100% auto; } I have unique background images on each of my sites, but they are large in size and take some time to load due to bein ...

javascripthtmlimagecss

The link in the HTML code has been prevented from opening in a new

echo "<tr><th align='left'><a href=\"$email\">$name</a></th> I recently transformed a PHP Email App into a saving app. However, I am encountering an issue with opening links within the application. You ca ...

phphtmlcsssqlphpmyadmin

The Failure of Multiselect to Display jQuery Validation Messages

My bootstrap multiselect is functioning correctly <div class="col-12 col-sm-6 col-md-6 col-lg-4"> <div class="form-group"> <p>Required Skills<span class="notice-txt">*</span></p> <sel ...

jquerylaravelbootstrap-4

Tips for transforming a menu into a dropdown menu

Is there a way to convert the current menu into a Dropdown menu? Currently, the menu is not collapsing and it keeps opening. Any suggestions on how to achieve this? Here is an example for reference: https://i.stack.imgur.com/2X8jT.png ar ...

phphtmlcssyii

Creating a sleek and modern look with Bootstrap 4: The Transparent sticky

Currently in the process of developing a webpage with sticky navigation. The main challenge I am facing is that I have multiple sections with background images and a transparent navigation bar. It's crucial for the logo to be displayed above the navig ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4