Код:
$('.window').draggable({
handle: ".window-handle"
});
.window {
width: 200px;
height: 200px;
background-color: #eee;
position: absolute;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
top:30px;
}
.window-handle {
width: 100%;
height: 20px;
background-color: #ccc;
position: absolute;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
top: -20px;
}
.exit {
float: right;
color:white;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="window hello">
<div class="window-handle">
title
<span class="exit">×</span>
</div>
</div>
Видно что box-shadow:;
блока с текстом title накладывается на родителя а мне нужно чтобы не блок родителя не накладывался и не дочерний блок т.е. так
shadow
? и в каких сторонах