create a layout with intersecting divs to display a table/chart

Question

create a layout with intersecting divs to display a table/chart

Lately, I have been pondering how to achieve a design similar to the one shown below. Specifically, I am interested in the "sparkline/area" chart that appears at the bottom of the table/divs.

I can't seem to figure out how to code something like this. The way the chart data overlaps each div is particularly confusing to me. Would using a table be the solution?

If anyone could offer some guidance or provide a quick code example demonstrating how to create this overlapping effect, it would be greatly appreciated.

If this question is not appropriate for Stackoverflow, please excuse my mistake.

javascript jquery html css

Answer 1

Answer №1

Utilize z-index to adjust the positioning of an element relative to other elements:

HTML

<div class="container">
    <div class="row">
        <div class="col">One</div>
        <div class="col above">Two Above</div>
        <div class="col">Three</div>
        <div class="col above">Four Above</div>
        <div class="col">Five</div>
    </div>
    <div class="bottomOne"></div>
    <div class="bottomTwo"></div>
</div>

CSS

.container{
    width:500px;
    height:150px;
    position:relative;
}

.row{
    width:500px;
    height:150px;
    background-color:gray;
}

.bottomOne{
    position:absolute;
    bottom:0px;
    left:0px;
    width:500px;
    height:50px;
    background-color:red;
    opacity:0.5;
    z-index:1;
}

.bottomTwo{
    position:absolute;
    bottom:0px;
    left:0px;
    width:500px;
    height:30px;
    background-color:blue;
    opacity:0.5;
    z-index:10;
}

.col{
    float:left;
    background-color:lightgray;
    width:98px;
    border:1px solid gray;
    height:148px;
    position:relative;
    text-align:center;
    line-height:100px;
    font-weight:bold;
}

.col.above{
    z-index:5;
}

To bring a column forward, simply apply the 'above' class to the row.

Check out this example for reference:

jsFiddle demonstration

Answer 2

Utilize z-index to adjust the positioning of an element relative to other elements:

HTML

<div class="container">
    <div class="row">
        <div class="col">One</div>
        <div class="col above">Two Above</div>
        <div class="col">Three</div>
        <div class="col above">Four Above</div>
        <div class="col">Five</div>
    </div>
    <div class="bottomOne"></div>
    <div class="bottomTwo"></div>
</div>

CSS

.container{
    width:500px;
    height:150px;
    position:relative;
}

.row{
    width:500px;
    height:150px;
    background-color:gray;
}

.bottomOne{
    position:absolute;
    bottom:0px;
    left:0px;
    width:500px;
    height:50px;
    background-color:red;
    opacity:0.5;
    z-index:1;
}

.bottomTwo{
    position:absolute;
    bottom:0px;
    left:0px;
    width:500px;
    height:30px;
    background-color:blue;
    opacity:0.5;
    z-index:10;
}

.col{
    float:left;
    background-color:lightgray;
    width:98px;
    border:1px solid gray;
    height:148px;
    position:relative;
    text-align:center;
    line-height:100px;
    font-weight:bold;
}

.col.above{
    z-index:5;
}

To bring a column forward, simply apply the 'above' class to the row.

Check out this example for reference:

jsFiddle demonstration

create a layout with intersecting divs to display a table/chart

Answer №1

Similar questions

What is the best way to automatically select a checkbox when using ng-repeat on page

Converting JSON into key-value pairs using ReactJS

Implementing a Singleton Pattern in ReactJS using Context API for Asynchronous Operations

Default file is still generated by Sass even when variables are modified

On production, Heroku fails to load JavaScript files, only allowing CSS files to be loaded. However, the files load successfully when

Steps to Activate Quill Editor on the Document Object Model (DOM) Post Cloning

Transforming jquery code into Angularjs code

Can the current website navigation be integrated into the blog script?

What is the best way to incorporate options using jQuery?

What is the best way to refactor this jQuery code without duplicating it?

Why is there an error when trying to assign Type '{}' in generics typescript?

Can anyone suggest an effective method for displaying images using JavaScript by specifying a route and filename?

The v-select function organizes data based on the content of "item-text"

There is an issue with my HTML due to a MIME type error

The presence of a Bootstrap addon is resulting in horizontal scrolling on mobile devices within the webpage

Adjust the contents of a DIV depending on which Toggle button is selected

Update the content within a document and implement jQuery to make it clickable

Iterating through a collection of objects, triggering a promise for each object and recording its completion

Safely transmitting client-side encrypted information between individuals

Is there an issue with Vue-router 2 where it changes the route but fails to update the view