html - How to make 3 absolute-positioned elements stick together even they are scaled resonsively? -
the 3 drinks stuck in mobile version. know, scale browser width, elements should scaled well. it's hard use percentage width , height's measurement.
i have following code:
<div class="s-drinks"> <div class="drink-wrap-col1"> <div class="drink"> <img src="https://placehold.it/300x500" alt="popular drink"> </div> </div> <div class="drink-wrap-col2"> <div class="drink--secondary"> <img src="https://placehold.it/300x500" alt="popular drink"> </div> </div> <div class="drink-wrap-col3"> <div class="drink"> <img src="https://placehold.it/300x500" alt="popular drink"> </div> </div> </div> .s-drinks { margin-top: 3em; position: relative; height: 1200px; } .drink { background-color: $drink-bg; width: 100%; position: relative; &:after { content: ""; position: absolute; top: -10px; left: 10px; right: 10px; bottom: -10px; border: 1px solid black; z-index: 1000; } img { width: 100%; } } .drink--secondary { @extend .drink; &:after { top: 10px; bottom: 10px; } } .drink-wrap { position: absolute; height: 50%; } .drink-wrap-col1 { @extend .drink-wrap; top: 0; left: 0; } .drink-wrap-col2 { @extend .drink-wrap; height: 55%; top: 30%; right: 0; z-index: 100; } .drink-wrap-col3 { @extend .drink-wrap; bottom: 0; left: 0; }
i shouldn't set fixed height .s-drinks
, have no idea how should position "mango ice cream" below "taro" responsively.
so @ width, works fine.
but browser scaled, works this:
so how should fix this?
have considered setting fixed width .s-drinks
container? doing prevents divs shifting position.
.s-drinks { margin: 0 auto; position: relative; height: 1200px; /*test width*/ width: 540px; }
Comments
Post a Comment