@b_efimenko

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

Столкнулся с такой проблемой, есть абсолютно спозиц. блок, он находится внутри блока с релейтив, а внутри абсолютно спозиц. блока есть кнопки по наведению на какие выпадают бутстраповские tooltips. Но получается так что теперь же они позиционируются относительно того блока с релейтив в котором находится и блок с абсолютным позиционированием и потому тултипы ведут себя некорректно.
Как тултипам отменить позиционирование относительно этого блока с релейтив, что бы он позиционировался относительно какого то другого блока?
  • Вопрос задан
  • 3763 просмотра
Пригласить эксперта
Ответы на вопрос 4
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
Без примера сложно понять. Например, у блоков с тултипами нужно задать position: relative;
т.е. образно должно быть так
<div relative>
   <div absolute>
      <div relative>tooltip</div>
      <div relative>tooltip</div>
   </div>
</div>
имейте привычку каждому блоку задавать position. Пусть даже если это в принципе не требуется, пишите машинально всегда position: relative; это поможет избежать непредвиденных ситуаций
Ответ написан
@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;
}
Ответ написан
RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.
Закинь кнопку в дополнительный div например а ему задай relative и display inline- block
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы