Is it possible for a DIV in one bootstrap column to appear on top of the content in another column?

Is there a way to get a div in the first bootstrap column to overflow the x-axis and have its content display above the second column to the right?

    <div class="row h-100">
        <div class="col-3 bg-info">
            <div class="LEFT">Content to be viewed</div>
        </div>
        <div class="col-9 bg-danger">Content that can be the shadow.</div>
    </div>

        div.row{
            overflow-x: auto;
        }
        div.col-3{
            overflow-x: visible;
            z-index:10;
        }
        div.popo{
            background-color: yellow;
            width:600px;
        }

My goal is to have the LEFT div visible over the second column (col-9). Is this achievable?

cssbootstrap-4

Answer №1

<div class="row h-100">
  <div class="col-3 bg-info">
    <div class="LEFT">Displayed Content</div>
  </div>
  <div class="col-9 bg-danger">Content that casts a shadow.</div>
</div>

.row {
  position: relative;
}
.bg-info {
  position: static;
}
.LEFT {
  position: absolute;
  text-align: center;
  top: 50%;
  right: calc( ( 4.5 / 12 ) * 100% );
  width: calc( ( 9 / 12 ) * 100% ) ;
  transform: translate(50%, -50%);
  z-index: 2;
  background-color: rgba( 1, 1, 1, .3);
}

Link to Codepen for more details

Answer №2

To change the position of your col-3 div, you can add the CSS property position: absolute. This will disrupt its content flow and cause it to appear ABOVE the col-9 div. 

.overlay{
position: absolute !important;
top: 0;
left: 0;
background-color: yellow;
opacity: 1;
z-index: 2000;
}

.bg-danger{
opacity: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row h-100">
  <div class="col-3 overlay">
    Im Over the col-9 DIV
  </div>
  <div class="col-9 bg-danger">Content that can be the shadow.</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

Tips for adjusting image size in Bootstrap carousel

Is it possible to change the width of the image in this carousel? How can I resize the image without affecting the red box? I've tried numerous solutions on various forums, but none seem to work. The image just won't shrink the way I want it to ...

htmlcssbootstrap-4carousel

Adjust the size using padding alone

My CSS specifies font size of 14px, line height of 14px, and padding of 7px on the top and bottom. The total should be 28px. When I apply these styles in a div, it results in a height of 28px. However, when applied to a ul li a element, the height becomes ...

csshtml-lists

How to Create a Compact JavaFX ComboBox

I'm attempting to create a more compact version of the ComboBox, but no matter what I try, the space between the text and arrow button remains consistent. When using the following CSS: .combo-box-base > *.arrow-button { -fx-padding: 0 0 0 0; ...

csslayoutcomboboxjavafxsize

Efficient Techniques for Concealing and Revealing Navigation Menus using HTML, CSS, and JavaScript

I need help making the menu icon toggle the navigate menu between showing and hiding when clicked on the top right corner of the screen. For better understanding, here is an accompanying image: https://i.stack.imgur.com/oy6d9.png However, the current co ...

javascripthtmlcssonclickshow-hide

What is the best way to apply a top padding to a background image using CSS?

I attempted to adjust the top padding using various pixel values in the style, but the image padding relative to the webpage remained unchanged. For example: padding-top: 5px; Here is part of my code snippet: <div class="row pb-5 mt-4" style ...

htmlcssbootstrap-4

Utilize jQuery to hide and then show elements based on text input

Recently, I came across a useful jQuery filter example that sparked my interest. To test it out, I created my live example and shared the code on CodePen (or you can check out the Fiddle if you prefer). One issue I encountered was that after entering text ...

javascriptjqueryhtmlcss

Ninja Flip ComboButton

I am looking to enhance the functionality of a toggle button within a web application that was developed using the JS Dojo API. Currently, the button is utilizing dijit.form.ToggleButton, but I need it to include an additional feature for a dropdown menu w ...

htmlcssdojo

Implementing dynamic styling with Alpine JS when hovering

I am working with 2 color pickers, one for background and one for text. These are connected to the styles of a button <button :style="`background-color: ${bg_colour}; color: ${text_colour};`">TEST BUTTON</button> Everything is funct ...

cssalpine.js

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Hey there, I'm currently facing a major issue with tailwindcss + nextjs... The problem lies in setting classes using a variable. Although the class is defined in the css, tailwind fails to convert it into a style. This is how I need it to be: https ...

cssreactjstypescriptnext.jsclassname

Eliminating hidden boundaries in a table by using CSS styling

I currently have a div container with a table embedded within. HTML: <div id='ribbon'><table id='topMenu'> <tr> <td><a href='index.php'>Home</a></td> <td><a href='links ...

htmlcss

My jQuery plugin crashes when I delete the line with '.css({display: 'none'})'

Currently, I am utilizing a jquery plugin that replaces the file input of a form with a div. This allows for the file browser to pop up when the div is clicked. Upon selecting a file, the form is automatically submitted and the results are loaded into a hi ...

javascriptjquerycss

Require assistance in getting a slider operational

Hello there! I could really use your assistance with this code. I have been trying to make it work using JavaScript, but I'm determined not to incorporate any external JS files. Here is the snippet of JavaScript code I am working with: "use strict"; ...

javascriptjquerycss

Unable to handle a POST request initiated by an HTML Form

Recently, I started working with Express and Bootstrap. While attempting to create a login form that triggers a POST request to the server, I encountered an issue where the page displays "The page isn't working" instead of loading a new HTML page. He ...

htmlcssajaxexpressbootstrap-4

CSS ID selectors are not functioning properly

In my React.JS project, I am working with a div that contains a button and a list. The list is specifically identified by the id "results". return <div> <Button label="Combine Cards" disabled={!this.props.combineReady} onClick={this.handleCli ...

javascripthtmlcssreactjs

Is it possible to create a dynamic <hr /> using Flexbox?

In the midst of working on my application, I managed to achieve a simple layout. However, there is one peculiar requirement that has been eluding me for the past 2 days and now I find myself in need of assistance. Here is the current HTML code I am workin ...

javascripthtmlcssangularflexbox

Transform the check box into a button with a click feature

I've customized a checkbox to resemble a button, but I'm encountering an issue where the checkbox is only clickable when you click on the text. Is there a way to make the entire button clickable to activate the checkbox? .nft-item-category-lis ...

htmlcsscheckbox

css how to style a table row with a specific identifier

Although this question has been asked millions of times on the internet, my English skills are not great and I struggle to find the right words to search. I have a table with a specific ID set up like this: <table class="tableClass"> <tr id="one ...

css

How can I disable a select element in Laravel 5?

Hey everyone! Currently using Laravel 5 and trying to style the "select" class as "selectpicker". I'm facing an issue where I want to disable or hide the selected option when clicked, as I'm creating a div with the option's content right b ...

javascriptjquerycsslaravelbootstrap-4

How to centrally align header elements in Bootstrap 4 on mobile devices?

In this setup using Bootstrap 4, I have a header structure as follows: <div class="container"> <div class="row"> <div class="col-md-6"> <div class="navbar-brand"><img src="..."></div> </div> <div class="col-m ...

csstwitter-bootstrapbootstrap-4

Issue with Jquery's .addClass and .removeClass functions

I'm having trouble implementing a dynamic menu on my webpage using jQuery. I've tried writing the code myself but it doesn't seem to be working as expected. The structure involves three classes: .dead, which sets display: none; in CSS, .hea ...

jqueryhtmlcsstwitter-bootstrap