Как спозиционировать относительно другого блока relative?

Question

[b_efimenko]

Столкнулся с такой проблемой, есть абсолютно спозиц. блок, он находится внутри блока с релейтив, а внутри абсолютно спозиц. блока есть кнопки по наведению на какие выпадают бутстраповские tooltips. Но получается так что теперь же они позиционируются относительно того блока с релейтив в котором находится и блок с абсолютным позиционированием и потому тултипы ведут себя некорректно.
Как тултипам отменить позиционирование относительно этого блока с релейтив, что бы он позиционировался относительно какого то другого блока?

Answer 1

[Александр Цымбал]

Без примера сложно понять. Например, у блоков с тултипами нужно задать position: relative;
т.е. образно должно быть так

<div relative>
   <div absolute>
      <div relative>tooltip</div>
      <div relative>tooltip</div>
   </div>
</div>

имейте привычку каждому блоку задавать position. Пусть даже если это в принципе не требуется, пишите машинально всегда position: relative; это поможет избежать непредвиденных ситуаций

Answer 2

[b_efimenko]

<div class="col-sm-6">
										<div class="portfolio-wrap">
										<img src="img/work1.jpg" alt="work1">
										
											<div class="portfolio-hide-block">
												<div class="hide-block-left">
													<span>EvroMedia TM</span>
													<a href="#">www.grapeshisha.com</a>
												</div>
												<div class="hide-block-right">
													<a href="#" class="blog-post-social fb" data-toggle="tooltip" data-placement="bottom" title="Поделиться в fb.com"></a>
											<a href="#" class="blog-post-social vk" data-toggle="tooltip" data-placement="bottom" title="Поделиться в vk.com"></a>
											<a href="#" class="blog-post-social tw" data-toggle="tooltip" data-placement="bottom" title="Поделиться в twitter.com"></a>
												</div>
											</div>
										</div>
									</div>

.portfolio .col-sm-6 .portfolio-wrap{
	position: relative;
	overflow: hidden;
	max-width: 548px;
	margin: auto;
}
.portfolio .col-sm-6 .portfolio-hide-block{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: 73px;
	background-color: #fff;
	overflow: hidden;
	padding-top: 15px;
	font-size: 18px;
	display: none;
}
.hide-block-left{
	float: left;
	padding-left: 15px;
}
.hide-block-left span{
	display: block;
	text-align: left;
}
.hide-block-left a{
	display: inline-block;
	margin-top: 5px;
}
.hide-block-right{
	float: right;
	padding-right: 15px;
}
.hide-block-right a{
	display: inline-block;
	width: 40px;
	height: 40px;
	box-sizing:border-box;
	border:1px solid #dadada;
	border-radius: 50%;
}
.hide-block-right a:hover{
	border-color: #44aff2;
	transition:all 300ms ease-in;
}

Comments

[b_efimenko]

блок, появляется при наведении.

Answer 3

[Tony Realovich]

jsfiddle.net/realovich/m8xvgaak/1

Answer 4

[Игорь Пушкарский]

Закинь кнопку в дополнительный div например а ему задай relative и display inline- block