Gesture Detector not working having container as child and Positioned as parent

I have a widget tree like:

Stack(
                          clipBehavior: Clip.none,
                          children: [
                            Container(
                              height: 20,
                              width: 100,
                              color: Colors.red,
                            ),
                            Positioned(
                                right: -10,
                                top: -20,
                                child: GestureDetector(
                                  behavior: HitTestBehavior.opaque,
                                  onTap: () {
                                    print('hello world');
                                  },
                                  child: Container(
                                    decoration: BoxDecoration(
                                        color: Colors.yellow,
                                        borderRadius:
                                            BorderRadius.circular(50.0),
                                        border: Border.all(
                                            color: Theme.of(context)
                                                .scaffoldBackgroundColor,
                                            width: 1.0)),
                                    height: 30,
                                    width: 30,
                                  ),
                                ))
                          ],
                        )

Gesture detector is only working for the region which lies inside the stack boundary (hence which is visible when clipBehavior is Clip.hardEdge,)
How to make the whole Gesture detector work or what could be an alternative approach to stack a clickable widget.

There are a lot of similar questions but I am not able to get the correct approach.