Tengo dos elementos y quiero que el segundo se adhiera al primero, de modo que cuando cambie el tamaño de la pantalla, el segundo elemento mantenga la misma posición que el primero.
var bubbleBtn = document.getElementsByClassName('qkb-bubble-btn ')[0]; var badge = document.getElementsByClassName('badge ')[0]; var rect = bubbleBtn.getBoundingClientRect(); badge.style.left = (rect.left+30)+'px'; badge.style.top = (rect.top-20) +'px'; .badge { position: absolute; padding: 5px 10px; border-radius: 50%; background: red; color: white; } .qkb-bubble-btn { margin-top: 100px; background-color: #FF7756 !important; } <div> <button class="qkb-bubble-btn">test</button> <span class="badge">3</span> </div>No sé cómo mostrar mi problema en el fragmento, pero básicamente toda la aplicación responde, por lo que el botón de burbuja se mueve cuando se cambia el tamaño de la pantalla y quiero que la insignia esté siempre en esta posición desde el botón.
¿Es posible usar solo CSS? ¿O debería activar mi código JS cada vez que se cambia el tamaño de la pantalla?
En su posición, preferiría ir a css solo configurando la posición del botón en relativa y agregando una regla de css que defina un elemento: después de que su ícono esté posicionado absoluto.
El efecto secundario es que el contenido deberá configurarse de la manera css.
En esta nueva demostración editada, agregué la posibilidad de content específico que aborde el data-number del atributo y agregué una clase a la regla para que muestre la burbuja solo si dicha clase está presente.
.qkb-bubble-btn { position: relative; background-color: #FF7756 !important; } .qkb-bubble-btn.showbubble:after { position: absolute; right:-25px; top:-20px; content: attr(data-number); padding: 5px 10px; border-radius: 50%; background: red; color: white; } <div style="padding: 25px;"> <button class="qkb-bubble-btn showbubble" data-number="3">test (showing)</button> <br> <button class="qkb-bubble-btn">test (hiding)</button> </div>El div principal debe tener position: relative y display: inline-block para relacionar la posición y dar un ancho igual al botón.
.badge-wrapper{ position: relative; margin-top: 100px; display: inline-block } .badge { position: absolute; padding: 5px 10px; border-radius: 50%; background: red; color: white; right: -20px; top: -20px; } .qkb-bubble-btn { background-color: #FF7756 !important; } <div class="badge-wrapper"> <button class="qkb-bubble-btn">test</button> <span class="badge">3</span> </div>Simplemente actualice su código de la siguiente manera, esto debería ayudarlo.
.container{ position: relative; } .badge { position: absolute; margin-left:20px; padding: 5px 10px; border-radius: 50%; background: red; color: white; } .qkb-bubble-btn { position: absolute; margin-top: 20px; background-color: #FF7756 !important; } <div class="container"> <button class="qkb-bubble-btn">test</button> <span class="badge">3</span> </div>No necesita el código Javascript para esto.