2

Здравствуйте! Есть контейнер, в котором лежит блок с текстом .text и кнопка .btn. По причинам, в подробности которых я вдаваться не буду, кнопку .btn мне приходится делать с абсолютным позиционированием, но вести себя она должна так же как и при position: static; - т.е. располагаться после текста и смещаться в зависимости от высоты блока .text.

Отсюда у меня вопрос: можно ли с помощью js/jQuery отслеживать высоту блока .text как при загрузке, так и при его ресайзе, и присваивать значение этой высоты + отступ, скажем, в 10px для значения свойства top у кнопки .btn?

.wrapper {
  position: relative;
  max-width: 450px;
  margin: 50px auto;
  padding: 15px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
}
.text {
  margin-bottom: 30px;
}
.btn {
  position: absolute;
  top: 0;
  width: calc(100% - 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  text-decoration: none;
  background: rgba(0,0,0,.5);
  color: #fff;
}
<div class="wrapper">
  <div class="text">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </div>
  <a href="#close" class="btn">Some btn</a>
</div>

3
  • Данный вопрос следует закрыть, потому что непонятно, в чём именно заключается проблема. Данных в вопросе недостаточно, чтобы дать подходящий ответ, поскольку имеющееся ограничение никак не обосновано и не ясно, что можно, а что нельзя использовать. Я могу предложить целую кучу вариантов решений без использования скриптов. meta.ru.stackoverflow.com/q/709/178988
    – Qwertiy
    Commented 29 дек. 2016 в 11:31
  • 1
    Почему бы просто в твоём коде не заменить top: 0 на margin-top: -25px;?
    – Qwertiy
    Commented 29 дек. 2016 в 11:46
  • Вы правы. Я почему-то полагал, что блок с абсолютным позиционированием по дефолту размещается в top:0; и left: 0; относительно родителя.
    – Игорь
    Commented 29 дек. 2016 в 12:01

4 ответа 4

3

Может вам будет так лучше? Зачем лишние скрипты ставить на страницу без особой надобности?

.wrapper {
  position: relative;
  max-width: 450px;
  margin: 50px auto;
  padding: 15px 15px 45px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
}
.text {
  margin-bottom: 15px;
}
.btn {
  position: absolute;
  top: 100%;
  left: 15px;
  right: 15px;
  margin-top: -45px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  text-decoration: none;
  background: rgba(0,0,0,.5);
  color: #fff;
}
<div class="wrapper">
  <div class="text">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </div>
  <a href="#close" class="btn">Some btn</a>
</div>

<div class="wrapper">
  <div class="text">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </div>
  <a href="#close" class="btn">Some btn</a>
</div>

2
  • Благодарю вас за ответ Алексей. К сожалению решение вопрос требует использование скрипта - почему так объясню, дополнив вопрос через 30 минут.
    – Игорь
    Commented 29 дек. 2016 в 11:41
  • а вы все же правы)
    – Игорь
    Commented 29 дек. 2016 в 12:04
3

position()

var x = $('.btn').position().top + 20;

$('.btn').css({
  'top': x + $('.text').height()
});

$(window).resize(function() {
  console.log($('.btn').position().top);
  
  $('.btn').css({
    'top': x + $('.text').height()
  });
});
.wrapper {
  position: relative;
  max-width: 450px;
  margin: 50px auto;
  padding: 15px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
}
.text {
  margin-bottom: 30px;
}
.btn {
  position: absolute;
  top: 0;
  width: calc(100% - 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  text-decoration: none;
  background: rgba(0,0,0,.5);
  color: #fff;
}
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<div class="wrapper">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quisquam nostrum soluta quos asperiores debitis, quia corporis assumenda sapiente sit maiores neque vitae aut. Unde nostrum facilis, adipisci sint iure quia. Sapiente porro fugiat assumenda rem nobis hic repellat dolor, maxime totam doloribus, delectus, dolorem pariatur aliquid ullam eaque obcaecati.
    Sed ut perspiciatLorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quisquam nostrum soluta quos asperiores debitis, quia corporis assumenda sapiente sit maiores neque vitae aut. Unde nostrum facilis, adipisci sint iure quia. Sapiente porro fugiat assumenda rem nobis hic repellat dolor, maxime totam doloribus, delectus, dolorem pariatur aliquid ullam eaque obcaecati.
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </div>
  <a href="#close" class="btn">Some btn</a>
</div>

2
  • Благодарю вас за ответ Елена! Подскажите еще пожалуйста, как бы сделать чтобы отслеживалась высота блока при ресайзе..
    – Игорь
    Commented 29 дек. 2016 в 11:27
  • 1
    @Игорь, исправила
    – SVE
    Commented 29 дек. 2016 в 12:23
2

.wrapper {
  position: relative;
  max-width: 450px;
  margin: 50px auto;
  padding: 15px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
}
.text {
  margin-bottom: 30px;
}
.btn {
  position: absolute;
  top: calc(100% - 40px);
  width: calc(100% - 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  text-decoration: none;
  background: rgba(0,0,0,.5);
  color: #fff;
}
<div class="wrapper">
  <div class="text">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </div>
  <a href="#close" class="btn">Some btn</a>
</div>
<div class="wrapper">
  <div class="text">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </div>
  <a href="#close" class="btn">Some btn</a>
</div>

2
  • Благодарю вас за ответ, но к сожалению он не подходит. У меня в блоке есть третий элемент (блок разделен на две колонки, третий эл-т во второй, и он самый высокий), поэтому отталкиваться от высоты контейнера - не вариант.
    – Игорь
    Commented 29 дек. 2016 в 11:24
  • Ответ был дан исходя из приведенный данных, уточните все данные условия в вопросе
    – soledar10
    Commented 29 дек. 2016 в 11:26
1

Можно просто заменить top: 0 на margin-top: -25px:

.wrapper {
  position: relative;
  max-width: 450px;
  margin: 50px auto;
  padding: 15px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
}
.text {
  margin-bottom: 30px;
}
.btn {
  position: absolute;
  margin-top: -25px;
  width: calc(100% - 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  text-decoration: none;
  background: rgba(0,0,0,.5);
  color: #fff;
}
<div class="wrapper">
  <div class="text">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </div>
  <a href="#close" class="btn">Some btn</a>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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