Hello! There is a container in which there is a block with the text .text and a button .btn . For reasons for which I will not go into details, I have to do the .btn button with absolute positioning, but it should behave in the same way as with position: static; - i.e. positioned after the text and shifted depending on the height of the .text block.

From here I have a question: is it possible to track the height of a .text block using js/jQuery both during loading and when resizing it, and assign the value of this height + indent, say, to 10px for the value of the top property of the .btn button?

 .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>

  • This question should be closed, because it is unclear exactly what the problem is. There is not enough data in the question to give a suitable answer, since the existing restriction is in no way justified and it is not clear what is possible and what cannot be used. I can offer a whole bunch of solutions without using scripts. meta.ru.stackoverflow.com/q/709/178988 - Qwertiy ♦
  • one
    Why not just replace in your code top: 0 with margin-top: -25px; ? - Qwertiy ♦
  • You're right. For some reason I thought that the block with absolute positioning by default is placed in top:0; and left: 0; relative to the parent. - Igor

4 answers 4

Maybe you will be better off? Why put extra scripts on the page without special need?

 .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>

  • Thank you for the answer Alex. Unfortunately, the solution to the issue requires the use of a script - why I will explain this by adding a question in 30 minutes. - Igor
  • and you're still right) - Igor

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>

  • Thank you for the answer Elena! Can you please tell me how to make the block height tracked during resize .. - Igor
  • one
    @ Igor, corrected - HamSter

 .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>

  • Thank you for the answer, but unfortunately it does not fit. I have a third element in the block (the block is divided into two columns, the third el is in the second, and it is the highest), so pushing off the height of the container is not an option. - Igor
  • The answer was given on the basis of the data provided, specify all the conditions in question - soledar10

You can simply replace top: 0 with 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>