0

Код:

		$('.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">&times;</span>
		</div>
	</div>

Видно что box-shadow:; блока с текстом title накладывается на родителя а мне нужно чтобы не блок родителя не накладывался и не дочерний блок т.е. так

title

7
  • Я как то не понял кто на кого накладывается? как я вижу нормально все. 12 июн 2017 в 10:30
  • А вы запускали код?
    – user245150
    12 июн 2017 в 10:33
  • да конечно, вы объяснять подробно на каких блоках должно быть shadow? и в каких сторонах 12 июн 2017 в 10:34
  • На картинке показано как ожидается
    – user245150
    12 июн 2017 в 10:34
  • что то путаете вы или не правильно объясняете. 12 июн 2017 в 10:35

2 ответа 2

1

Стоит использовать тень только на `.window, и сделать нужный паддинг внутри него.

$('.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;
  padding-top: 20px;
}

.window-handle {
  width: 100%;
  height: 20px;
  background-color: #ccc;
  position: absolute;
  top: 0;
}

.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">&times;</span>
  </div>
</div>

0

У вас все правильно работает, просто неправильно определили box-shadow. Попробуйте это:

$('.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;
   box-shadow: 0px -2px 6px rgba(0,0,0,0.25);
   position: absolute;
   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">&times;</span>
   </div>
</div>

1
  • Спасибо но ответ выше лучше в плане отображения
    – user245150
    13 июн 2017 в 20:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.