Make text visible above overlapping div

Question

I have a design requirement where a div has to overlap another div, but the text within the inner div needs to be visible.

<div class='box1'>
  <div class='sendAbove'>
    This is a message I want to be visible in this div
  </div>
</div>

<div class='box2'>

</div>

CSS

.box1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 20px;
  left: 20px;
  background: white;
  border: solid red 1px;
  z-index: 3;
}

.box2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  background: white;
  border: solid blue 1px;
  z-index: 4;
}

.sendAbove {
  z-index: 5;
}

https://jsfiddle.net/sriv87/Lcoxrgpw/9/

Edit: Updated fiddle https://jsfiddle.net/sriv87/c8eh5fcs/

Make the second box transparent? https://jsfiddle.net/2j60k9yu/ — sol, Mar 05 '18 at 08:32
@sol No, Its a design requirement. I need the border to be overlapped, but not the text — nonexistent myth, Mar 05 '18 at 08:33
you are overcomplicating it ... and you lead us to something else, you need to be clear from the beginning that you need a particular shape instead of providing another problem — Temani Afif, Mar 05 '18 at 09:00
@TemaniAfif - am sorry I didn't make the connect to the speech bubble myself. Am designing this for a custom map placeholder. — nonexistent myth, Mar 05 '18 at 09:13
i know but next time better be direct on what you need :) so you need to tell us what your are trying to achieve instead of showing us a method where you want to force things in order to achieve somthing we don't know as we may guide you to better ways instead of helping fixing a complicated way — Temani Afif, Mar 05 '18 at 09:16

Sujan Sundareswaran · Answer 1 · 2018-03-05T09:26:51.437

1

Ok, Edited as per your updated requirement. Check this.

.callout {
  position: relative;
  background: #ffffff;
  border: 1px solid #f00;
  width: 200px;
}

.callout:after,
.callout:before {
  position: absolute;
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
}

.callout:after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: white;
  border-width: 10px;
  margin-top: -10px;
}

.callout:before {
  border-color: rgba(255, 0, 0, 0);
  border-left-color: #f00;
  border-width: 11px;
  margin-top: -11px;
}

<div class="callout">
  <p>Message here</p>
</div>

edited Mar 05 '18 at 09:26

answered Mar 05 '18 at 08:41

Sujan Sundareswaran

2,324
2
11
25

I hope this is what you were looking for. Your question wasn't very clear. – Sujan Sundareswaran Mar 05 '18 at 08:43
I have updated the question. I cannot put the message separate from the box1 since I need a border. The text may be dynamic length and I still need a border for it. – nonexistent myth Mar 05 '18 at 08:51
Try this, it'll work. – Sujan Sundareswaran Mar 05 '18 at 09:27

score 0 · Answer 2 · answered Mar 05 '18 at 08:43

With your current layout it wont work. Because the parent of .sendAbove is absolute positioned, its html will allways be part of its parent. Regardless you make it absolute or relative.

So to make this workable, you should put the .sendAbove outside .box1. Give them both the same position, height and width.

.wrapper {
  position: relative;  
}

.box1, .sendAbove {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
}

.box1 {
  background: white;
  border: solid red 1px;
  z-index: 3;
}

.box2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  background: white;
  border: solid blue 1px;
  z-index: 4;
}

.sendAbove {
  z-index: 5;
}

<div class="wrapper">
<div class='box1'>
</div>

<div class='sendAbove'>
    This is a message I want to be visible in this div
  </div>

<div class='box2'>

</div>
</div>

the message is dynamic. The width and the height would vary for me to set the border. I have updated the question to give you a better idea. — nonexistent myth, Mar 05 '18 at 08:49

nooby · Answer 3 · 2018-03-05T08:56:49.903

Just change the background color settings in .box2 and that will make text underneath visible. How visible will be decided by the 'a' in rgba, and runs from 0 to 1, ie, 0.1 is very transparent, 0.9 has virtually no transparency.

 .box2 {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50px;
      left: 50px;
      **background-color: rgba(255,255,255,0);**
      border: solid blue 1px;
      z-index: 4;

}

Make text visible above overlapping div

3 Answers3