el cuadro azul se adjunta al cuadro verde y, si tenemos suficiente espacio, debería estar justo en el cuadro verde para 10px. Pero si no tenemos suficiente espacio en el cuadro rojo, entonces el cuadro azul debe moverse al cuadro verde y superponerse, pero debe estar dentro del cuadro rojo.
No puedo insertar capturas de pantalla aquí, así que consulte el enlace a continuación. He descrito mi problema en https://jsfiddle.net/rkd69mfu/1/
<div class='wrapper'> <div class='message'> <div class='message__content'> <span>some content</span> <div class='message__content-menu'></div> </div> </div> </div> .wrapper { width: 50%; height: 300px; border: 1px solid black; overflow: hidden; } .message { width: 100%; height: 30px; border: 1px solid red; } .message__content { width: 90%; height: 15px; border: 1px solid green; position: relative; } .message__content-menu { position: absolute; width: 20px; height: 10px; border: 1px solid blue; left: 100%; margin-left: 10px; }
