jquery - Css force button to be in the bottom of absolute div -
im wondering if there way forcefulness div after absolute position div without set height remain in bottom , dont become on absolute div?
this code:
class="snippet-code-css lang-css prettyprint-override"> .wrap { position: relative; } .ab { position: absolute; }
class="snippet-code-html lang-html prettyprint-override"><div class="wrap"> <div class="ab row"> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit down amet, ante. donec european union libero sit down amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo.</p> </div> </div> <div class="row"> <button>push me</button> </div>
i create find if element position absolute:
class="snippet-code-js lang-js prettyprint-override">//check if prev element kid has position absolute op var pos = $(".row").prev().children(".ab").css("position"); if (pos == "absolute") { //take height of element var height = $(".row").prev().children(".ab row").css("height"); //change element contains button top position $(".row").css({ "position": "relative", "top": height }); }
class="snippet-code-css lang-css prettyprint-override">.wrap { position: relative; } .ab { position: absolute; }
class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="ab row"> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit down amet, ante. donec european union libero sit down amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo.</p> </div> </div> <div class="row"> <button>push me</button> </div>
i created somethng more generic match element may has absolute position:
class="snippet-code-js lang-js prettyprint-override">$(".row").prev().find("*").each(function() { if ($(this).css("position") == "absolute") { var height = $(this).css("height"); $(".row button").css({ "position": "relative", "top": height }); } });
class="snippet-code-css lang-css prettyprint-override">.wrap { position: relative; } .ab { position: absolute; }
class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="ab row"> <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit down amet, ante. donec european union libero sit down amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo.</p> </div> </div> <div class="row"> <button>push me</button> </div>
jquery html css
No comments:
Post a Comment