CSS-通过父高度/宽度限制元素位置以防止溢出

Question

Is there a way to prevent an absolute positioned element to overflow its parent container by limiting its position if it overflows the parent?

In my case: I have a round graph, with bubbles inside, I use border-radius to create the circle, and use position:absolute + top and left to position the element based on a calculation result.

I want to prevent this from happening:

In this case, or in an extreme case like top: 0; left: 0; top: 0; left: 0; the bubble overflows the parent circle, and I want it to be contained within the circle limits.

Is it possible to do that? Or do I have to use javascript? If I have to use javascript: is it possible to obtain the limit of an element rounded with border: radius: 100% ?

Answer 1

Not a perfect solution, but here's how overflow: hidden already has some built-in functionality for this. I'm using JavaScript to have the dot follow the cursor:

 $('.circle').on('mousemove', function(e) { $('.dot').css({ 'top': e.clientY, 'left': e.clientX }); }); 

 .circle { width: 180px; height: 180px; border: 5px solid black; border-radius: 50%; position: relative; overflow: hidden; } .dot { border-radius: 50%; background: red; width: 30px; height: 30px; margin-left: -30px; margin-top: -30px; position: absolute; pointer-events: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle"> <div class="dot"></div> </div>