Overlapping divs

Hello!

I am trying to make 2 overlapping divs that will remain in the same position as you resize the window.

Like the picture the 2 sections are the gray and the pink.

The 2 divs that I want to overlap and remain in the same position are the teal and the yellow.

I know that this shape I could make it using clip-mask, so there is no problem with that. (at least this is one way to make it)

I have try to position them using absolute position, so they could overlap on the bellow div but they do not remain in the same position as you resize the window.

So maybe you know another way to make it?

1 Like

First let’s establish what you mean by the “same position”.
As you resize the window, the size, space and aspect of the available area changes, so something has to give in one way or another.
So what we need to know first is, what must remain fixed, and what will be allowed to adjust and resize/move.
Perhaps to illustrate this clearly, rather than just one screen shot, show one for a large screen, and another for a small one.

4 Likes

Ok yes you are right.

I want to remain the same the meeting point of the teal and the yellow div. The corners of these two divs to remain at the same distance.

The adjusting part can be the horizontal part of the divs, the one in the red circle.

2 Likes

So the centre, vertical parts will remain in the centre, and the horizontal parts will crop off at the sides?

Yes this is correct Sam

What should it look like when the viewport is half as tall?

Do those straight lines get smaller and smaller or do they stay the same thickness. e.g do the lines scale with viewport width and height or do they simply get cropped at the top and sides but always remain the same thickness?

It’s quite hard to envisage a ‘use case’ for this but the answer will rely on percentages based on viewport width and height and will assume that you never have more content than the viewport itself.

1 Like

This is an approximation using pseudo elements and absolute positioning.

4 Likes

Thank you Sam, this is working exactly as I had in my mind.

I guess I need some practice with the absolute positioning etc.

2 Likes

I didn’t understand your request. Too many unknowns, as @PaulOB already described.
Nevertheless, based on @SamA74’s example, I tinkered…

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>fixed-design=ronpat</title>
<!--
https://www.sitepoint.com/community/t/overlapping-divs/368414
nikostzounakos
2021.05.30 02:56
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {margin:0;}
.outer {
    min-height:148px;  /* tweakable if needed */
    position:relative;
    border:1px solid #000;
}
.outer::before,
.outer::after {
    content:"";
    position:absolute;
    z-index:-2;
    width:100%;
    height:50%;
    border:1px solid #000;
}
.outer::before {
    top:0;
    background-color:#99a;
}
.outer::after {
    bottom:0;
    background-color:#e6a;
}
/*
    NOTE: The sum of the percent numbers of 
   .upper{bottom:calc(28% + 32px) and
   .lower{top:calc(72% - 32px) 
    should equal 100%.  (28% + 72% = 100%)
*/
.upper {
    position:absolute;
    top:calc(28% - 32px);   /* positions top of blue horizontal line */
    bottom:calc(28% + 32px);   /* sets bottom of blue vertical line */
    width:50%;
    z-index:-1;
    border-top:64px solid rgba(0,255,255,1);
    border-right:64px solid rgba(0,255,255,1);
}
.lower {
    position:absolute;
    top:calc(72% - 32px);   /* positions top of yellow horizontal line */
    right:0;
    bottom:0;
    width:50%;
    z-index:-1;
    border-top:64px solid rgba(255,255,0,1);
    border-left:64px solid rgba(255,255,0,1);
}

    </style>
</head>
<body>

<div class="outer">
    <div class="upper"></div>
    <div class="lower"></div>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
</div>

</body>
</html>

Only tested with Firefox. Let me know if it fails elsewhere, please.

3 Likes

One last example.

This example gets rid of the second pseudo-element by re-sizing the first pseudo-element and applying a three-color linear gradient to it. It’s the first time I’ve used calc in a gradient. It validates and works beautifully in Firefox. :slightly_smiling_face:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>fixed-design2=ronpat</title>
<!--
https://www.sitepoint.com/community/t/overlapping-divs/368414
nikostzounakos
2021.05.30 02:56
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {margin:0;}
.outer {
    min-height:12em;  /* option: min-height */
    height:100vh;  /* option: bg pattern fills full window. */
    position:relative;
    border:2px solid #000;
}
.outer::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:-2;
    width:100%;
    height:100%;
    background-image:linear-gradient(to bottom, #99a 0, #99a calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #e6a calc(50% + 1px), #e6a 100%);
}
/*
    NOTE: The sum of the percents of 
   .upper{bottom:calc(28% + 32px) and
   .lower{top:calc(72% - 32px) 
    should equal 100%. ie: (28% + 72% = 100%)
*/
.upper {
    position:absolute;
    top:calc(28% - 32px);   /* positions top of blue horizontal line */
    bottom:calc(28% + 32px);   /* sets bottom of blue vertical line */
    width:50%;
    z-index:-1;
    border-top:64px solid rgba(0,255,255,1);
    border-right:64px solid rgba(0,255,255,1);
}
.lower {
    position:absolute;
    top:calc(72% - 32px);   /* positions top of yellow horizontal line */
    right:0;
    bottom:0;
    width:50%;
    z-index:-1;
    border-top:64px solid rgba(255,255,0,1);
    border-left:64px solid rgba(255,255,0,1);
}

    </style>
</head>
<body>

<div class="outer">
    <div class="upper"></div>
    <div class="lower"></div>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
    <p>try me</p>
</div>

</body>
</html>
3 Likes

Thank you too ronpat, that’s a great way too. Love it.

The lines simply get cropped as the examples that they have pointed out by Sam and ronpat, they are great.

If all you are interested in is in learning how to use absolute positioning and the resulting layout is not going to be used to hold content or be part of a real layout then ignore the rest of my post as your question has been answered by Ron and Sam.

Sam’s and Ron’s first examples are basically fixed height elements and cannot hold real content as they will not stretch. Ron’s second example is more related to the questions I was asking as it fills the viewport and scales with viewport height. However Ron’s example cannot hold real content either or this happens.

As you see that is not a viable layout for real content but this is no matter if you are just practicing how to place things. When I answer a question on the forums I ma always thinking of the ‘use case’ and what happens next. There’s no point in offering solutions that can’t work in the real world unless as I already mentioned this is just practice.

If indeed you wanted that pattern just to be a background for your content and each half doesn’t hold other content then you would need other methods.

For example we can do the whole thing without any extra html at all (based on Ron’s fine example).

You can put content into that example and the design won’t scroll away )although you will need to ensure the z-index of your content is higher than the other positioned elements).

As you can see a question that starts ‘simply’ is indeed not that simple and I can still think of half a dozen things that could be different or need to be considered.

If this is just a learning practice then no worries and you can play around as you like :). I just didn’t want you to think that you could start putting content into those elements:)

4 Likes

Thank you very much Paul.

Your point of view is understandable and very professional I think. I understand that I have to be more specific in order to get more accurate answers.

The solution that I am working on, is to put some content in the sections, but just something small at the vertical side for each div, the teal and the yellow.
Which I made it by placing some divs on Sam’s solution, inside the “top” and “bottom” div, with absolute position too.

So it’s not full content that’s for sure.

But as I am thinking it, I would love to know a solution where the 2 divs can hold real content and it’s not something just for practicing this.

Is there a better way to make the height of the divs adjusting in the content that is inside of them?

Would you mind double-checking my code, @PaulOB? Both of my examples should hold real content (whereas Sam’s did not for me). Both of mine trigger a scroll-bar when/if the text content exceeds the bottom of the browser window. I used z-index to position the colored pseudo elements behind the .outer element which is where the text should reside.

I’m seeing this in Chrome as you don’t seem to control the overflow on outer (or use min-height) in the last example which means the whole thing scrolls away.

Your first example grows with content as you use a min-height.

That results in a display like this when content is added.

Which may or may not be the desired effect.:slight_smile: I wasn’t sure if each half was supposed to be scrollable or whether each half just grows as required :wink:

Thank you, @PaulOB. The penny drops! I have some homework to do because that is not what I was expecting or intending at all. I didn’t test adequately before posting. bummer

1 Like

Do you want content in the top div and for the top div to stretch with the content and then pushes the bottom div further down the screen. If so that’s what Ron’s first example will do (see my screenshot above).

I suppose the main question is what do you want to happen and how should it look when both sections have content that exceeds their initial dimensions? We need to know what you are trying to do next and what your main aim for the design is?

If you only have a couple of words or a couple of headings then it could be easy but if you have multiple content sections as any normal website then you need a defined plan of attack :slight_smile:

Perhaps a rough drawing of your finished product would help us in pointing the way.

1 Like

Hey my initial intention is just to have some sort of heading, very small text, and the examples that the guys have made here support this.
So I am ok with that.

But after that I think of your perspective, and I thought what if I had more real content there, how should I do this?
Just to practice it.

So if you have any way of how we should make this it would be great.

I have not a final product into my mind, it’s just what I thought after your answer :slight_smile:

I would just play around with what you have so far and see what happens?

When you run into a problem you can post here and ask how to do it better or how to handle it properly.

My initial thoughts are whether you have 2 separate sections (top and bottom) and whether you have content in each section that stays with each background?

Or whether the design we see is just the background to the viewport and does not relate to content (as in my example) and you can just enter content as you wish.

I think you need to progress with your design a bit further so we can see where you are heading. :slight_smile: Generally though its content that comes first and then you build a design around the content (or hand in hand with content) rather than starting with a flat design and then trying to fit content to the design.

2 Likes