Css - some UX issue with elements overlaping

Question

At start, this is general question without sample code, as i'm looking for a idea, how to archive this:

I have 3 absolute positioned elements, which overlaps each other. They all have background color, for example red.

Now, div1 overlaps div2, so they have common area, and user is unable to see when first div ends, and secod starts...

As i draw on image below, i may chage opacity of this divs, so user can see some diffrence, but this may be not 100% good solution.

My question is, does anybody have ideas, how make this more readable, maybe some css features, which i don't know about (background color mixing or something...)

Thank you for ideas :)

Tim Sheehan · Accepted Answer · 2015-11-20 11:28:32Z

1

You can set the opacity of a background color using rgba:

.div { background-color: rgba(255,0,0,0.8); }

This takes your red, green and blue colours then an opacity (from 0 to 1 in decimal form). You can also use opacity: 0.8 but it's going to lower the opacity of the entire div including its border.

answered Nov 20, 2015 at 11:28

Tim Sheehan

4,0141 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hacktisch · Accepted Answer · 2015-11-20 11:29:36Z

1

Another idea is not to use just transparent background color, but transparent lines and hashes, in different directions. A bit like in the below image.

But you could make the lines a bit transparent and in different angles and colors. This way, the difference in the divs will be more elegant. And not a mess of colors.

answered Nov 20, 2015 at 11:29

Hacktisch

1,51418 silver badges36 bronze badges

Collectives™ on Stack Overflow

Css - some UX issue with elements overlaping

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related