2

Делаю слайдер. Хочу сделать так, как сказано в заголовке. Это нужно, чтобы управлять слайдером только через opacity. Основная проблема в том, что, если дочерним элементам поставить position: absolute, то родитель схлопывается, а мне нужна его рамка.

body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap {
  position: relative;
  border: 2px solid red;
  display: flex;
  justify-content: space-between;

}
.div{
  border: 1px solid;
  width: 100px;
  height: 100px;
  position: absolute;
}
<div class="wrap">
	<div class="div">1</div>
	<div class="div">2</div>
	<div class="div">3</div>
	<div class="div">4</div>
</div>

1 ответ 1

2

Вообщем, решение пришло уже в тот момент, когда оформил вопрос. Не пропадать же добру)

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

body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap {
  position: relative;
  border: 1px solid red;
  display: flex;
  justify-content: space-between;

}
.div{
  border: 1px solid;
  width: 100px;
  height: 100px;
  position: absolute;
  opacity: 0;
}
.div:first-child{
  position: relative;
  opacity: 1;
}
<div class="wrap">
	<div class="div">1</div>
	<div class="div">2</div>
	<div class="div">3</div>
	<div class="div">4</div>
</div>

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.