Сделать чтобы один div перекрывал второй

Question

Делаю выпадающее меню, но через него просвечивает текст div-а.

Как исправить- сделать чтобы меню закрывало div?

.msgSub-menu{ margin: 0px 0px 0px auto;
width:70px;
user-select: none;
border: 1px solid #8ab113;
list-style-type: none;
padding: 0px;
background-color: #ece5ae;
Border-radius: 3px;
z-index: 1; }

.messageMenu1{ 
margin: 0px 0px 0px auto;
width:24px;
height: 24px;
background-color: red;
position: relative;
bottom: -0px; } 

.messageBody { 
margin: 20px 10px 50px 20px;
overflow: hidden;
} 

.message { 
box-shadow: -2px 3px 3px #918350;
border: 1px solid #8ab113;
margin: 3px;
padding: 2px;
background: #ece5ae;
border-radius: 5px ;
width: 200px; }

.messageMenu{
margin: 0px 0px 0px auto;
height: 0px; }

<div class="message" style="box-shadow: none;">
<div class="messageMenu">
<div class="messageMenu1" > </div>
<div class="msgMenuBody" va="333" style="//display: none;"> </div>
<ul class="msgSub-menu"  >
<li><a href="#1">подпункт</a></li>
<li><a href="#2">подпункт</a></li>
<li><a href="#3">подпункт</a></li>
</ul>
</div>
<div class="messageBody">Я помню чудное мгновенье: Передо мной явилась ты, Как мимолетное виденье, Как гений чистой красоты. (про взаимоотношения между div-ами  :) )
</div>
</div>
</div>

Answer 1

можно сделать так:

.msgSub-menu {
  position: relative;
  z-index: 10;
  display: block;
  background: white;
}

причем даже z-index уже не обязателен, по сути выставив position вы сказали браузеру правильно позиционировать слои

.msgSub-menu{ margin: 0px 0px 0px auto;
width:70px;
user-select: none;
border: 1px solid #8ab113;
list-style-type: none;
padding: 0px;
background-color: #ece5ae;
Border-radius: 3px;
z-index: 1; }

.messageMenu1{ 
margin: 0px 0px 0px auto;
width:24px;
height: 24px;
background-color: red;
position: relative;
bottom: -0px; } 

.messageBody { 
margin: 20px 10px 50px 20px;
overflow: hidden;
} 

.message { 
box-shadow: -2px 3px 3px #918350;
border: 1px solid #8ab113;
margin: 3px;
padding: 2px;
background: #ece5ae;
border-radius: 5px ;
width: 200px; }

.messageMenu{
margin: 0px 0px 0px auto;
height: 0px; }

.msgSub-menu {
  position: relative;
  z-index: 10;
  display: block;
  background: white;
}

<div class="message" style="box-shadow: none;">
<div class="messageMenu">
<div class="messageMenu1" > </div>
<div class="msgMenuBody" va="333" style="//display: none;"> </div>
<ul class="msgSub-menu"  >
<li><a href="#1">подпункт</a></li>
<li><a href="#2">подпункт</a></li>
<li><a href="#3">подпункт</a></li>
</ul>
</div>
<div class="messageBody">Я помню чудное мгновенье: Передо мной явилась ты, Как мимолетное виденье, Как гений чистой красоты. (про взаимоотношения между div-ами  :) )
</div>
</div>
</div>

БЛОГ НА HUSL

Сделать чтобы один div перекрывал второй

Ответы (1 шт):